Android 仿微信介面 使用RadioGroup+ViewPager實現底部按鈕切換以及滑動
阿新 • • 發佈：2018-12-14
先來效果圖哈哈  1.首先搭建MainActivity的介面 名為activity_main.xml <LinearLayout 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" android:orientation="vertical" tools:context="${relativePackage}.${activityClass}" > //ViewPager需要提前匯入design包 <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="10"> </android.support.v4.view.ViewPager> <RadioGroup android:id="@+id/group" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="horizontal" > <RadioButton android:id="@+id/one" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/one_selected" android:gravity="center_horizontal" android:text="微信" android:textSize="12sp" /> <RadioButton android:id="@+id/two" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/two_selected" android:gravity="center_horizontal" android:text="通訊錄" android:textSize="12sp" /> <RadioButton android:id="@+id/three" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/three_selected" android:gravity="center_horizontal" android:text="發現" android:textSize="12sp" /> <RadioButton android:id="@+id/four" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/four_selected" android:gravity="center_horizontal" android:text="我" android:textSize="12sp" /> </RadioGroup> </LinearLayout> 2.RadioButton 中需要引入drawable檔案 需要我們在res資料夾下建立 //需要8張圖片 同樣內容的明暗兩張 xiaoxi是選中時候的圖片 xiaoxier是未選中時候的圖片 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/xiaoxi" android:state_selected="true"></item> <item android:drawable="@drawable/xiaoxier" android:state_selected="false"></item> <item android:drawable="@drawable/xiaoxier"></item> </selector> 3.建立四個fragment 1)拿其中一個 OneFragment 來說 public class OneFragment extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View v=inflater.inflate(R.layout.one_fragment, null); return v; } } 2)one_fragment.xml <?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" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/s10"/> </LinearLayout> 4.MainActivity程式碼 public class MainActivity extends FragmentActivity { //建立ViewPagerAdapter介面卡的資料來源 private ArrayList<Fragment>fragments=new ArrayList<Fragment>(); //將所有Button按鈕的id放到一個整形的陣列中 private int []radioId={R.id.one,R.id.two,R.id.three,R.id.four}; //建立一個RadioButton型別的陣列 private RadioButton[]buttons=new RadioButton[radioId.length]; private ViewPager viewpager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { //找到radioGroup 和 ViewPager 的id RadioGroup group=(RadioGroup) findViewById(R.id.group); viewpager = (ViewPager) findViewById(R.id.viewpager); //向集合中新增元素 因為集合的泛型是Fragment 所以新增的元素是Fragment物件 fragments.add(new OneFragment()); fragments.add(new TwoFragment()); fragments.add(new ThreeFragment()); fragments.add(new FourFragment()); //通過for迴圈初始化RadioButton陣列 for(int i=0;i<buttons.length;i++){ buttons[i]=(RadioButton) findViewById(radioId[i]); } //設定預設顏色 和預設狀態 buttons[0].setTextColor(Color.GREEN); buttons[0].setSelected(true); //設定ViewPager的點選事件 viewpager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { for(int i=0;i<buttons.length;i++){ if(arg0==i){ buttons[i].setTextColor(Color.GREEN); buttons[i].setSelected(true); }else{ buttons[i].setTextColor(Color.GRAY); buttons[i].setSelected(false); } } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); //RadioGroup的點選事件 group.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.one: changedColor(0); break; case R.id.two: changedColor(1); break; case R.id.three: changedColor(2); break; case R.id.four: changedColor(3); break; default: break; } } }); ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager(), fragments); viewpager.setAdapter(adapter); } public void changedColor(int index){ for(int i=0;i<buttons.length;i++){ if(i==index){ viewpager.setCurrentItem(i,false); buttons[i].setTextColor(Color.GREEN); buttons[i].setSelected(true); }else{ buttons[i].setTextColor(Color.GRAY); buttons[i].setSelected(false); } } } } 5.建立ViewPagerAdapter 程式碼如下: public class ViewPagerAdapter extends FragmentPagerAdapter{ private ArrayList<Fragment>fragments; public ViewPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragments) { super(fm); this.fragments=fragments; } @Override public Fragment getItem(int arg0) { // TODO Auto-generated method stub return fragments.get(arg0); } @Override public int getCount() { // TODO Auto-generated method stub return fragments.size(); } }