先看設計圖
設計圖
依然是丑的要死的一幅圖，這一次只關注整體框架，即頂部導航欄，我們需要完成一個可以點擊的導航欄，點擊四個按鈕之后，下面的界面會有一個滑動切換的效果
知識點
- ViewPager（頁面切換組件）
我們可以往里面填充多個View，然后我們可以通過觸摸屏幕左右滑動切換不同的View，我們需要一個Adapter(適配器)，將要顯示的View和 我們的ViewPager進行綁定，而ViewPager有他自己特定的Adapter——PagerAdapter！另外，Google 官方是建議我們使用Fragment來填充ViewPager的,這樣可以更加方便的生成每個Page以及管理 每個Page的生命周期!當然它給我們提供了兩個不同的Adapter，他們分別是： FragmentPageAdapter和FragmentStatePagerAdapter！我們這次要用的便是FragmentPageAdapter。 - Fragment(碎片)
相當于一個布局塊，有自己的生命周期，用來做這種滑動視圖很方便 - RadioButton(單選按鈕)
只能夠選中一個，所以我們需要把RadioButton放到RadioGroup按鈕組中，從而實現(xiàn)單選功能
項目結構
項目結構
開始寫代碼
- 創(chuàng)建一個acticity，名字是config.xml，代碼如下
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//頂部導航欄
<RadioGroup
android:id="@+id/rg_tab_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#01806F"
android:orientation="horizontal">
<RadioButton
android:id="@+id/show"
style="@style/tab_menu_item"
android:text="@string/show" />
<RadioButton
android:id="@+id/clock"
style="@style/tab_menu_item"
android:text="@string/clock" />
<RadioButton
android:id="@+id/time"
style="@style/tab_menu_item"
android:text="@string/time" />
<RadioButton
android:id="@+id/my"
style="@style/tab_menu_item"
android:text="@string/my"/>
</RadioGroup>
//頁面切換組件
<android.support.v4.view.ViewPager
android:id="@+id/vpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
- 由于每一個RadioButton都是一樣的樣式，所以我們把樣式單獨提出來放在style.xml中
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="tab_menu_item">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">@drawable/tab_menu_text</item>
<item name="android:textSize">18sp</item>
</style>
</resources>
- 創(chuàng)建一個MyFragment.java文件，用來表示頁面切換里的每個頁，暫時四個頁面都用同一個類，在每個頁中顯示不同的字而已
package love.xzjs.t_android;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Created by Administrator on 2017/11/14.
*/
public class MyFragment extends android.support.v4.app.Fragment {
public String content;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.config_show,container,false);
Log.e("HEHE",content);
return view;
}
}
此處MyFragment 繼承的是android.support.v4.app.Fragment，因為ViewPager也是v4庫中的
- 創(chuàng)建一個MyFragmentPagerAdapter.java文件，用來管理頁面的切換
package love.xzjs.t_android;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private final int PAGE_COUNT = 4;
private Show show;
private MyFragment myFragment2, myFragment3, myFragment4;
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
show = new Show();
myFragment2 = new MyFragment();
myFragment3 = new MyFragment();
myFragment4 = new MyFragment();
myFragment2.content = "2";
myFragment3.content = "3";
myFragment4.content = "4";
}
/**
* Return the Fragment associated with a specified position.
*
* @param position
*/
@Override
public Fragment getItem(int position) {
Fragment fragment = null;
switch (position) {
case MainActivity.PAGE_ONE:
fragment = show;
break;
case MainActivity.PAGE_TWO:
fragment = myFragment2;
break;
case MainActivity.PAGE_THREE:
fragment = myFragment3;
break;
case MainActivity.PAGE_FOUR:
fragment = myFragment4;
break;
}
return fragment;
}
/**
* Return the number of views available.
*/
@Override
public int getCount() {
return PAGE_COUNT;
}
}
- 修改MainActivity.java，使橫屏顯示原來的主頁面，豎屏顯示剛創(chuàng)建好的布局
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int mCurrentOrientation = getResources().getConfiguration().orientation;
if (mCurrentOrientation == Configuration.ORIENTATION_PORTRAIT) {
Log.i("info", "port");
setContentView(R.layout.config);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
bindViews();
radioButtonShow.setChecked(true);
} else {
Log.i("info", "land");
setContentView(R.layout.activity_main);
}
}
綁定每個按鈕和對應的點擊事件
private void bindViews() {
radioGroup = (RadioGroup) findViewById(R.id.rg_tab_bar);
radioGroup.setOnCheckedChangeListener(this);
radioButtonShow = (RadioButton) findViewById(R.id.show);
radioButtonClock = (RadioButton) findViewById(R.id.clock);
radioButtonTime = (RadioButton) findViewById(R.id.time);
radioButtonMy = (RadioButton) findViewById(R.id.my);
viewPager = (ViewPager) findViewById(R.id.vpager);
viewPager.setAdapter(myFragmentPagerAdapter);
viewPager.setCurrentItem(0);
viewPager.addOnPageChangeListener(this);
}
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (i) {
case R.id.show:
viewPager.setCurrentItem(PAGE_ONE);
break;
case R.id.clock:
viewPager.setCurrentItem(PAGE_TWO);
break;
case R.id.time:
viewPager.setCurrentItem(PAGE_THREE);
break;
case R.id.my:
viewPager.setCurrentItem(PAGE_FOUR);
break;
}
}
頁面滑動之后修改頂部導航欄按鈕的狀態(tài)
@Override
public void onPageScrollStateChanged(int state) {
if (state == 2) {
switch (viewPager.getCurrentItem()) {
case PAGE_ONE:
radioButtonShow.setChecked(true);
break;
case PAGE_TWO:
radioButtonClock.setChecked(true);
break;
case PAGE_THREE:
radioButtonTime.setChecked(true);
break;
case PAGE_FOUR:
radioButtonMy.setChecked(true);
break;
}
}
}
結果演示
因為有下一節(jié)的代碼，所以最后結果和代碼不太一樣，不過只要能豎屏顯示這個界面，并實現(xiàn)頁面的滑動效果就可以了
demo.gif
