Android Tab，androidtab

Android Tab，androidtab

原文地址：http://blog.csdn.net/crazy1235/article/details/42678877

效果：滑動切換；點擊標籤切換。

代碼：

1、布局：使用LinearLayout布置標籤；再使用ViewPager來布置Fragment；使用ImageView作為指標。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="36dp" android:orientation="horizontal" android:weightSum="3"> <TextView android:id="@+id/tab1_tv" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="選項卡一" android:textColor="#707070"/> <TextView android:id="@+id/tab2_tv" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="選項卡二" android:textColor="#707070"/> <TextView android:id="@+id/tab3_tv" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="選項卡三" android:textColor="#707070"/> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="80dp" android:layout_height="wrap_content" android:layout_marginTop="0dp" android:src="@drawable/down_line"/> <android.support.v4.view.ViewPager android:id="@+id/third_vp" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>viewpager_fragmentpageradapter.xml

 

1、實現View.OnClickLinstener介面，在onClick方法中完成點擊標籤進行切換的功能：調用ViewPager的setCurrentItem()方法。

2、實現ViewPager.OnPageChangeListener方法，在onPageScrolled方法中，改變指標的位置。

3、在原文的基礎上：

a、去掉screen1_3(螢幕寬度的三分之一)；增加tabCount(tab的數量)和widthOfOneTab(一個tab的寬度 screenWidth / tabCount)。

b、調整onPageScrolled方法，使其更具通用性。

public class ViewPagerAndFragmentPagerAdapterActivity extends FragmentActivity implements View.OnClickListener, ViewPager.OnPageChangeListener{ private static final String LOG_TAG = ViewPagerAndFragmentPagerAdapterActivity.class.getSimpleName(); // 三個textview private TextView tab1Tv, tab2Tv, tab3Tv; // 指標 private ImageView cursorImg; // viewPager private ViewPager viewPager; // fragment對象集合 private ArrayList<Fragment> fragmentsList; // 記錄當前選中的tab的index private int currentIndex = 0; // 指標的位移量 private int offset = 0; // 左margin private int leftMargin = 0; // 螢幕寬度 private int screenWidth = 0; // 螢幕寬度的三分之一 //private int screen1_3; // Tab的數量 private int tabCount; // 一個Tab的寬度 screenWidth / tabCount private int widthOfOneTab; // private LinearLayout.LayoutParams lp; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.viewpager_fragmentpageradapter); init(); } /** * 初始化操作 */ private void init(){ DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); screenWidth = dm.widthPixels; cursorImg = (ImageView) findViewById(R.id.cursor); lp = (LinearLayout.LayoutParams) cursorImg.getLayoutParams(); leftMargin = lp.leftMargin; tab1Tv = (TextView) findViewById(R.id.tab1_tv); tab2Tv = (TextView) findViewById(R.id.tab2_tv); tab3Tv = (TextView) findViewById(R.id.tab3_tv); tabCount = 3; widthOfOneTab = screenWidth / tabCount; tab1Tv.setOnClickListener(this); tab2Tv.setOnClickListener(this); tab3Tv.setOnClickListener(this); initViewPager(); } private void initViewPager(){ viewPager = (ViewPager) findViewById(R.id.third_vp); fragmentsList = new ArrayList<>(); Fragment fragment = new FragmentAndFManager_Fragment1(); fragmentsList.add(fragment); fragment = new FragmentAndFManager_Fragment2(); fragmentsList.add(fragment); fragment = new FragmentAndFManager_Fragment3(); fragmentsList.add(fragment); viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentsList)); viewPager.setCurrentItem(0); viewPager.setOnPageChangeListener(this); } @Override public void onClick(View v) { Log.d(LOG_TAG, "In onClick v.getId() = " + v.getId()); switch(v.getId()){ case R.id.tab1_tv: viewPager.setCurrentItem(0); break; case R.id.tab2_tv: viewPager.setCurrentItem(1); break; case R.id.tab3_tv: viewPager.setCurrentItem(2); break; } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { offset = (widthOfOneTab - cursorImg.getLayoutParams().width) / 2; Log.d(LOG_TAG, "In onPageScrolled: " + position + " -- " + positionOffset + " -- " + positionOffsetPixels); //final float scale = getResources().getDisplayMetrics().density;// if(position == 0){// lp.leftMargin = (int) (positionOffsetPixels / 3) + offset;// }else if(position == 1){// lp.leftMargin = (int) (positionOffsetPixels / 3) + widthOfOneTab + offset;// } if(position < tabCount - 1){ lp.leftMargin = (int) (positionOffsetPixels / tabCount) + widthOfOneTab * position + offset; } cursorImg.setLayoutParams(lp); currentIndex = position; } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { }}ViewPagerAndFragmentPagerAdapterActivity.java

 

1、自訂類FragmentAdapter繼承FragmentPagerAdapter，實現方法getItem()和getCount()。

2、通過ArrayList<Fragmet>來儲存適配器綁定的Fragment集合。

public class FragmentAdapter extends FragmentPagerAdapter { private ArrayList<Fragment> list; public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> list) { super(fm); this.list = list; } @Override public Fragment getItem(int position) { return list.get(position); } @Override public int getCount() { return list.size(); }}FragmentAdapter.java