1.ViewPager
ViewPager例衍。它是google SDk中自帶的一個附加包的一個類俺附，可以用來實現(xiàn)屏幕間的切換。其與BottomNavigationView和Fragment配合使用可以很好的實現(xiàn)Android底部導(dǎo)航欄及屏幕滑動切換碎片的功能
首先在活動布局里加入ViewPager控件：用法同普通控件一樣
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
接著在MainActivity中使用
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;//
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager) findViewById(R.id.mViewPager);//獲取到ViewPager
//ViewPager的監(jiān)聽
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
bottomNavigationView.getMenu().getItem(position).setChecked(true);
//滑動頁面后做的事铃彰，這里與BottomNavigationView結(jié)合蜗巧，使其與正確page對應(yīng)
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//底部導(dǎo)航欄有幾項就有幾個Fragment
final ArrayList<Fragment> fgLists=new ArrayList<>(3);
fgLists.add(new ManageFragment());
fgLists.add(new FindFragment());
fgLists.add(new MyFragment());
//設(shè)置適配器用于裝載Fragment
FragmentPagerAdapter mPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fgLists.get(position); //得到Fragment
}
@Override
public int getCount() {
return fgLists.size(); //得到數(shù)量
}
};
mViewPager.setAdapter(mPagerAdapter); //設(shè)置適配器
mViewPager.setOffscreenPageLimit(2); //預(yù)加載剩下兩頁
//以上就將Fragment裝入了ViewPager
}
}
2.BottomNavigationView
在 build.gradle 文件中增加依賴：
compile 'com.android.support:design:25.2.0'
- 菜單元素只能是 3~5 個。如果個數(shù)少于3個或者多于5個奏赘，則會報錯寥闪。
在同樣的活動布局里加入BottomNavigationView控件，為了美觀磨淌，可以在ViewPager和BottomNavigationView中間加個View
<View
android:layout_width="match_parent"
android:background="#3399cc"
android:layout_height="1dp" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/mBottom"
android:layout_width="match_parent"
android:layout_height="50dp"
app:menu="@menu/navigation"></android.support.design.widget.BottomNavigationView>
其中有一項 app:menu="@menu/navigation" 用于底部導(dǎo)航欄的具體顯示
需要我們建一個menu的xml文件
我們在res/menu下新建一個navigation.xml（沒有menu文件夾就新建一個）疲憋，然后在xml里添加自己想要的目錄選項
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:title="管理" //名字
android:icon="@drawable/ic_manage" //顯示的圖標(biāo)
android:id="@+id/manager_item"/>
<item
android:id="@+id/find_item"
android:icon="@drawable/ic_find"
android:title="發(fā)現(xiàn)" />
<item
android:icon="@drawable/ic_my"
android:id="@+id/my_item"
android:title="我的" />
</menu>
圖中底部導(dǎo)航欄上的藍色條即為剛才加的View
bottom.JPG
在MainActivity中使用
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager) findViewById(R.id.mViewPager);
bottomNavigationView=(BottomNavigationView) findViewById(R.id.mBottom);
//設(shè)置點擊監(jiān)聽
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId())
{
//根據(jù)navagatin.xml中item的id進行case
case R.id.manager_item:
mViewPager.setCurrentItem(0);
//跳到對應(yīng)ViewPager的page
break;
case R.id.find_item:
mViewPager.setCurrentItem(1);
break;
case R.id.my_item:
mViewPager.setCurrentItem(2);
break;
}
return false;
}
});
//ViewPager的一系列設(shè)置
.................
...................
}
}
以上ViewPager和BottomNavigationView的結(jié)合就使用完成
3.Fragment
碎片（fragment）里面就是我們具體要呈現(xiàn)給大家的東西，fragment的用法需要一個類和一個布局文件梁只，我們新建一個類繼承自Fragment
public class MyFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
//R.layout.fragment_my為該fragment的布局
View view=inflater.inflate(R.layout.fragment_my,container,false);
return view;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
}
為該fragment新建一個布局文件,該布局很簡單缚柳，就加入了一個TextView，可以自行拓展加入各種控件等
<?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">
<TextView
android:text="my"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
剩余兩個fragment同上一樣
結(jié)尾
以上三者結(jié)合即可實現(xiàn)基本的底部導(dǎo)航欄UI布局設(shè)計
