Как создавать пользовательскую перелистываемую вкладку в андроиде

Question

Я хочу, чтобы создавать собственную перелистываемую вкладку в моем андроиде приложении проекта, как я представил в картине

здесь

.

Answer 1

Попробуйте это .. Как я пытался .. вы можете сделать хорошо ..

activity_main.xml

<RelativeLayout 
    android:id="@+id/main_layout" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".MainActivity"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:background="?attr/colorPrimary" 
     android:elevation="6dp" 
     android:minHeight="?attr/actionBarSize" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tab_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/toolbar" 
     android:background="?attr/colorPrimary" 
     android:elevation="6dp" 
     android:minHeight="?attr/actionBarSize" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 
     android:layout_height="fill_parent" 
     android:layout_below="@id/tab_layout"/> 
</RelativeLayout> 

В вашем MainActivity

@Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

........................... 
........................... 

     TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
     tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); 
     tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); 
     tabLayout.addTab(tabLayout.newTab().setText("Tab 3")); 
     tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 

     final ViewPager viewPager = (ViewPager) findViewById(R.id.pager); 
     final PagerAdapter adapter = new PagerAdapter 
       (getSupportFragmentManager(), tabLayout.getTabCount()); 
     viewPager.setAdapter(adapter); 
     viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 
     tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       viewPager.setCurrentItem(tab.getPosition()); 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 

      } 
     }); 
    } 

добавить PagerAdapter. java

package com.truiton.designsupporttabs; 

import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentStatePagerAdapter; 

public class PagerAdapter extends FragmentStatePagerAdapter { 
    int mNumOfTabs; 

    public PagerAdapter(FragmentManager fm, int NumOfTabs) { 
     super(fm); 
     this.mNumOfTabs = NumOfTabs; 
    } 

    @Override 
    public Fragment getItem(int position) { 

     switch (position) { 
      case 0: 
       TabFragment1 tab1 = new TabFragment1(); 
       return tab1; 
      case 1: 
       TabFragment2 tab2 = new TabFragment2(); 
       return tab2; 
      case 2: 
       TabFragment3 tab3 = new TabFragment3(); 
       return tab3; 
      default: 
       return null; 
     } 
    } 

    @Override 
    public int getCount() { 
     return mNumOfTabs; 
    } 
} 

Reference ...

http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/

Answer 2

Поскольку ссылки только ответы не допускаются в SO, добавляя какие-то шаги, чтобы сделать.

Шаг 1: Определите три разных набора классов фрагментов, которые будут использоваться для каждой вкладки. [Android рекомендует использовать фрагменты вместо активности]

Шаг 2: Определите адаптер пейджера, который поможет вам загрузить вышеуказанные три фрагмента под каждую вкладку.

Шаг 3: В основной деятельности вы определяете tablayout и устанавливаете вышеуказанный адаптер, как показано в ссылке на учебное пособие.

Пожалуйста, обратитесь к приведенному ниже руководству, это очень просто и поможет вам в достижении того, что вам нужно.

http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/

Выше ссылку, только поможет вам реализовать мазковые-возможности представления. Если вам нужно реализовать точный дизайн, например, изображение, которое вы разместили, нуждается в некоторой работе в ваших стилях xml или попробуйте с помощью доступных изображений здесь.

One more useful link

Позвольте мне знать, для запросов.

EDIT

Я также ссылаюсь на то же самое, что @kush упоминается.

Answer 3

Я нашел способ сделать аналогичную компоновку вкладок с помощью pageadapter. Ниже приведен код для него.

код MainActivity:

import android.os.Bundle; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.view.ViewPager; 

public class MainActivity extends FragmentActivity { 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    // Get the view from activity_main.xml 
    setContentView(R.layout.activity_main); 

    // Locate the viewpager in activity_main.xml 
    ViewPager viewPager = (ViewPager) findViewById(R.id.pager); 

    // Set the ViewPagerAdapter into ViewPager 
    viewPager.setAdapter(new PagerAdapter(getSupportFragmentManager())); 
    } 
} 

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.view.ViewPager 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/pager" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 

<android.support.v4.view.PagerTabStrip 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="top" 
    android:paddingBottom="10dp" 
    android:paddingTop="10dp" 
    android:textColor="#000000" /> 

</android.support.v4.view.ViewPager> 

PageAdapter.java

import android.content.Context; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 

public class PagerAdapter extends FragmentPagerAdapter { 

final int PAGE_COUNT = 3; 
// Tab Titles 
private String tabtitles[] = new String[] { "PLAYLIST", "SONGS", "ALBUMS" }; 
Context context; 

public PagerAdapter(FragmentManager fm) { 
    super(fm); 
} 

@Override 
public int getCount() { 
    return PAGE_COUNT; 
} 

@Override 
public Fragment getItem(int position) { 
    switch (position) { 

     // Open FragmentTab1.java 
     case 0: 
      SongsList fragmenttab1 = new SongsList(); 
      return fragmenttab1; 

     // Open FragmentTab2.java 
     case 1: 
      SecondFragment fragmenttab2 = new SecondFragment(); 
      return fragmenttab2; 

     // Open FragmentTab3.java 
     case 2: 
      ThirdFragment fragmenttab3 = new ThirdFragment(); 
      return fragmenttab3; 
    } 
    return null; 
} 

@Override 
public CharSequence getPageTitle(int position) { 
    return tabtitles[position]; 
} 
} 

Вы можете создать п фрагменты в вашем проекте. Вот пример фрагмента кода.

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 

public class SecondFragment extends Fragment { 

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Get the view from fragmenttab1.xml 
    View view = inflater.inflate(R.layout.fragment_second, container, false); 
    return view; 
} 
} 

и его XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:layout_centerVertical="true" 
    android:text="@string/Fragment2" /> 

</RelativeLayout> 

Добавить этот ресурс значения, чтобы удалить панель действий, панель заголовка в макете в styles.xml

<resources> 

<!-- Base application theme. --> 
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <!-- Customize your theme here. --> 
    <item name="colorPrimary">@color/colorPrimary</item> 
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
    <item name="colorAccent">@color/colorAccent</item> 
    <item name="android:windowNoTitle">true</item> 
    <item name="windowActionBar">false</item> 
    <item name="windowNoTitle">true</item> 

</style> 
</resources>