先看设计图
设计图
依然是丑的要死的一幅图，这一次只关注整体框架，即顶部导航栏，我们需要完成一个可以点击的导航栏，点击四个按钮之后，下面的界面会有一个滑动切换的效果
知识点
- ViewPager（页面切换组件）
我们可以往里面填充多个View，然后我们可以通过触摸屏幕左右滑动切换不同的View，我们需要一个Adapter(适配器)，将要显示的View和 我们的ViewPager进行绑定，而ViewPager有他自己特定的Adapter——PagerAdapter！另外，Google 官方是建议我们使用Fragment来填充ViewPager的,这样可以更加方便的生成每个Page以及管理 每个Page的生命周期!当然它给我们提供了两个不同的Adapter，他们分别是： FragmentPageAdapter和FragmentStatePagerAdapter！我们这次要用的便是FragmentPageAdapter。 - Fragment(碎片)
相当于一个布局块，有自己的生命周期，用来做这种滑动视图很方便 - RadioButton(单选按钮)
只能够选中一个，所以我们需要把RadioButton放到RadioGroup按钮组中，从而实现单选功能
项目结构
项目结构
开始写代码
- 创建一个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>
- 创建一个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库中的
- 创建一个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，使横屏显示原来的主页面，竖屏显示刚创建好的布局
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;
}
}
页面滑动之后修改顶部导航栏按钮的状态
@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;
}
}
}
结果演示
因为有下一节的代码，所以最后结果和代码不太一样，不过只要能竖屏显示这个界面，并实现页面的滑动效果就可以了
demo.gif
