Android可滑動的Tab頁
阿新 • • 發佈:2019-01-04
RadioGroup+ViewPager+Fragment實現的可滑動的Tab頁,非常的靈活。
最終效果圖
部分原始碼
MainActivity
activity_main.xmlpackage com.example.shen.tabtest.activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.widget.RadioButton; import android.widget.RadioGroup; import com.example.shen.tabtest.R; import com.example.shen.tabtest.adapter.myFragmentPagerAdapter; import com.example.shen.tabtest.fragment.EvaluationFragment; import com.example.shen.tabtest.fragment.MerchantFragment; import com.example.shen.tabtest.fragment.OrderFragment; import java.util.ArrayList; public class MainActivity extends FragmentActivity implements RadioGroup.OnCheckedChangeListener{ private ViewPager viewPager; private RadioGroup radioGroup; private RadioButton rbOrder,rbEvaluation,rbMerchant; private ArrayList<Fragment> alFragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化介面元件 initView(); //初始化ViewPager initViewPager(); } private void initView(){ viewPager=(ViewPager) findViewById(R.id.viewpager); radioGroup=(RadioGroup) findViewById(R.id.radiogroup); rbOrder=(RadioButton) findViewById(R.id.rb_order); rbEvaluation=(RadioButton) findViewById(R.id.rb_evaluation); rbMerchant=(RadioButton) findViewById(R.id.rb_merchant); radioGroup.setOnCheckedChangeListener(this); } private void initViewPager(){ OrderFragment orderFragment=new OrderFragment(); EvaluationFragment evaluationFragment=new EvaluationFragment(); MerchantFragment merchantFragment=new MerchantFragment(); alFragment=new ArrayList<>(); alFragment.add(orderFragment); alFragment.add(evaluationFragment); alFragment.add(merchantFragment); //ViewPager設定介面卡 viewPager.setAdapter(new myFragmentPagerAdapter(getSupportFragmentManager(), alFragment)); //ViewPager顯示第一個Fragment viewPager.setCurrentItem(0); //ViewPager頁面切換監聽 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //滑動ViewPager,RadioButton選中狀態做相應變換 @Override public void onPageSelected(int position) { switch (position){ case 0: radioGroup.check(R.id.rb_order); break; case 1: radioGroup.check(R.id.rb_evaluation); break; case 2: radioGroup.check(R.id.rb_merchant); break; } } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 點選RadioButton切換ViewPager中相應的Fragment * @param group * @param checkedId */ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId){ case R.id.rb_order: viewPager.setCurrentItem(0,false); break; case R.id.rb_evaluation: viewPager.setCurrentItem(1,false); break; case R.id.rb_merchant: viewPager.setCurrentItem(2,false); break; } } }
myFragmentPagerAdapter<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <RadioGroup android:id="@+id/radiogroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="10dp"> <RadioButton android:id="@+id/rb_order" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/order" android:checked="true" style="@style/style_radiobutton"/> <RadioButton android:id="@+id/rb_evaluation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/evaluation" style="@style/style_radiobutton"/> <RadioButton android:id="@+id/rb_merchant" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/merchant" style="@style/style_radiobutton"/> </RadioGroup> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/radiogroup"> </android.support.v4.view.ViewPager> </RelativeLayout>
style_radiobuttonpackage com.example.shen.tabtest.adapter; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.ArrayList; /** * Created by Administrator on 2015/6/24. */ public class myFragmentPagerAdapter extends FragmentPagerAdapter { private ArrayList<Fragment> list; public myFragmentPagerAdapter(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(); } }
<style name="style_radiobutton">
<item name="android:layout_weight">1</item>
<item name="android:button">@null</item>
<item name="android:background">@null</item>
<item name="android:gravity">center</item>
<item name="android:drawablePadding">10dp</item>
<item name="android:drawableBottom">@drawable/radiobutton_selector</item>
<item name="android:textColor">@drawable/textcolor_selector</item>
<item name="android:textSize">16sp</item>
</style>