一般app底部導航欄的分頁效果
阿新 • • 發佈：2019-02-15
大致效果是這樣。上面頁面和底部頁面按鈕一一對應。
頁面滑動底部按鈕變化，點選按鈕頁面變化
大致思路
頁面用Viewpager新增型別為FragmentpagerAdapter的Adapter。
使每個分頁都是繼承Fragment的碎片頁面
底部用RadioGroup，RadioButton。
並RadioButton新增點選事件切換Viewpager，ViewPager設定onPageChangeListener改變按鈕選中狀態
mainactivity.xml
<?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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_above="@+id/rg_bottom" /> <RadioGroup android:id="@+id/rg_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/bg_white" android:layout_alignParentBottom="true" android:orientation="horizontal" > <!----> <RadioButton android:id="@+id/rb_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:checked="false" android:button="@null" android:drawableTop="@drawable/selectbotton_menuhome" android:gravity="center" android:text="頁面一" android:textSize="13sp" /> <RadioButton android:id="@+id/rb_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="false" android:drawableTop="@drawable/selectbotton_menula" android:gravity="center" android:text="頁面二" android:textSize="13sp" /> <RadioButton android:id="@+id/rb_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="false" android:drawableTop="@drawable/selectbotton_menume" android:gravity="center" android:text="頁面三" android:textSize="13sp" /> <RadioButton android:id="@+id/rb_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="false" android:drawableTop="@drawable/selectbotton_menumore" android:gravity="center" android:text="頁面四" android:textSize="13sp" /> </RadioGroup> </RelativeLayout>
xml的RadioButton的圖片效果都設定了selector狀態選擇器的xml檔案。能根據checked型別自動變化。舉個栗子
selectbotton_menuhome.xml id為rb_1的RadioButton設定的圖片引用屬性
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--狀態選擇器--> <item android:drawable="@mipmap/fragment_color_page" android:state_checked="true" /> <item android:drawable="@mipmap/fragment_grey_page" android:state_checked="false" /> </selector>
MainActivity.java
public class MainActivity extends FragmentActivity implements View.OnClickListener{ private ViewPager viewpager; private RadioGroup rg_bottom; private HomeFragmentAdapter adapter; private RadioButton rb_1,rb_2,rb_3,rb_4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewpager = (ViewPager) findViewById(R.id.viewpager); rg_bottom = (RadioGroup) findViewById(R.id.rg_bottom); rb_1 = (RadioButton) findViewById(R.id.rb_1); rb_2 = (RadioButton) findViewById(R.id.rb_2); rb_3 = (RadioButton) findViewById(R.id.rb_3); rb_4 = (RadioButton) findViewById(R.id.rb_4); FragmentManager manager = getSupportFragmentManager(); adapter = new HomeFragmentAdapter(manager); viewpager.setAdapter(adapter); //吧第一個按鈕設為選中 rb_1.setChecked(true); rb_1.setOnClickListener(this); rb_2.setOnClickListener(this); rb_3.setOnClickListener(this); rb_4.setOnClickListener(this); /** * 滑動viewpage改變RadioButton */ viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { RadioButton radioButton= (RadioButton) rg_bottom.getChildAt(position); radioButton.setChecked(true); } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 按按鈕更改顯示viewpage * @param v */ @Override public void onClick(View v) { switch (v.getId()) { case R.id.rb_1: viewpager.setCurrentItem(0); break; case R.id.rb_2: viewpager.setCurrentItem(1); break; case R.id.rb_3: viewpager.setCurrentItem(2); break; case R.id.rb_4: viewpager.setCurrentItem(3); break; } } }
<pre name="code" class="java">
HomeFragmentAdapter.javapublic class HomeFragmentAdapted extends FragmentPagerAdapter{
private Fragment[] fragments;
public HomeFragmentAdapted(FragmentManager fm) {
super(fm);
fragments=new Fragment[4];
fragments[0] = new PageActicity_1();
fragments[1] = new PageActicity_2();
fragments[2] = new PageActicity_3();
fragments[3] = new PageActicity_4();
}
//返回一個fragment物件頁面
@Override
public Fragment getItem(int i) {
return fragments[i];
}
//頁面的數量
@Override
public int getCount() {
return fragments.length;
}
}PageActivity.java
作為分頁的碎片頁面被新增在FragmentPagerAdapter裡 在這裡作為一個activity來寫需要的頁面程式碼(引用的layout佈局就不寫了只設置了背景顏色)
呃 有四個頁面就有4個PageActivity 舉個栗子就寫一個。
public class PageActicity_1 extends Fragment {
@Nullable
@Override
//得到頁面佈局 並且邏輯程式碼也能寫在這裡
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = View.inflate(getContext(), R.layout.activity_page1,null);
return view;
}
}