Android中ViewPager常用功能3----仿微信既能點選又能滑動的選項卡
阿新 • • 發佈：2019-02-15
效果圖：
MainActivity中
activity_main.xmlpackage com.example.viewpagertest4; import android.app.Activity; import android.graphics.Color; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.TextView; import java.util.ArrayList; import java.util.List; /** * viewPager結合Fragment * 實現既能點選又能滑動的選項卡，仿微信 * 這裡要繼承的FragmentActivity */ public class MainActivity extends FragmentActivity { // viewPager private ViewPager viewPager; private TextView tvPage1; private TextView tvPage2; private TextView tvPage3; private TextView tvPage4; // 存放下面4個textView的list private List<TextView>tvList; // 存放fragment的list private List<Fragment>fragmentList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); myOnclick(); } private void initView(){ tvPage1 = (TextView)findViewById(R.id.tvPage1); tvPage2 = (TextView)findViewById(R.id.tvPage2); tvPage3 = (TextView)findViewById(R.id.tvPage3); tvPage4 = (TextView)findViewById(R.id.tvPage4); tvList=new ArrayList<>(); tvList.add(tvPage1); tvList.add(tvPage2); tvList.add(tvPage3); tvList.add(tvPage4); fragmentList=new ArrayList<>(); Fragment01 fragment01=new Fragment01(); Fragment02 fragment02=new Fragment02(); Fragment03 fragment03=new Fragment03(); Fragment04 fragment04=new Fragment04(); fragmentList.add(fragment01); fragmentList.add(fragment02); fragmentList.add(fragment03); fragmentList.add(fragment04); // 初始化viewPager viewPager = (ViewPager)findViewById(R.id.viewPager); // 繫結介面卡 MyPagerAdapter myPagerAdapter =new MyPagerAdapter(getSupportFragmentManager(), fragmentList); viewPager.setAdapter(myPagerAdapter); } private void myOnclick() { // 監聽事件 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { // 這個方法會在螢幕滾動過程中不斷被呼叫。 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } // 當前選擇的頁面 @Override public void onPageSelected(int position) { switch (position) { case 0: for (TextView textView : tvList) { textView.setTextColor(Color.parseColor("#CCCCCC")); } tvPage1.setTextColor(Color.parseColor("#FF3399")); break; case 1: for (TextView textView : tvList) { textView.setTextColor(Color.parseColor("#CCCCCC")); } tvPage2.setTextColor(Color.parseColor("#FF3399")); break; case 2: for (TextView textView : tvList) { textView.setTextColor(Color.parseColor("#CCCCCC")); } tvPage3.setTextColor(Color.parseColor("#FF3399")); break; case 3: for (TextView textView : tvList) { textView.setTextColor(Color.parseColor("#CCCCCC")); } tvPage4.setTextColor(Color.parseColor("#FF3399")); break; } } // 這個方法在手指操作螢幕的時候發生變化。有三個值：0（END）,1(PRESS) , 2(UP) 。 @Override public void onPageScrollStateChanged(int state) { } }); // page1點選事件 tvPage1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 滑到第一頁 viewPager.setCurrentItem(0); } }); // page2點選事件 tvPage2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 滑到第二頁 viewPager.setCurrentItem(1); } }); // tvPage3點選事件 tvPage3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 滑到第三頁 viewPager.setCurrentItem(2); } }); // tvPage4點選事件 tvPage4.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 滑到第四頁 viewPager.setCurrentItem(3); } }); } // 繫結Fragment的介面卡 class MyPagerAdapter extends FragmentPagerAdapter { private List<Fragment> fragments; public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments) { super(fm); this.fragments = fragments; } @Override public Fragment getItem(int i) { return fragments.get(i); } @Override public int getCount() { return fragments.size(); } } }
建立4個fragment,這裡這些一個<?xml version="1.0" encoding="utf-8"?> <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" tools:context="com.example.viewpagertest4.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#FF66FF" android:layout_marginBottom="50dp" > </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal" android:layout_alignParentBottom="true" > <TextView android:id="@+id/tvPage1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="page1" android:textSize="16sp" android:gravity="center" android:textColor="#FF3399" /> <TextView android:id="@+id/tvPage2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="page2" android:textSize="16sp" android:gravity="center" /> <TextView android:id="@+id/tvPage3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="page3" android:textSize="16sp" android:gravity="center" /> <TextView android:id="@+id/tvPage4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:text="page4" android:textSize="16sp" android:gravity="center" /> </LinearLayout> </RelativeLayout>
Fragment01
fragment_fragment01.xmlpackage com.example.viewpagertest4; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class Fragment01 extends Fragment { public Fragment01() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_fragment01, container, false); } }
<FrameLayout 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"
tools:context="com.example.viewpagertest4.Fragment01">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="第一頁" />
</FrameLayout>
ViewPadeDemo----viewpagertest4