TabLayout+ViewPager+Toolbar实现顶部标
2018-11-13 本文已影响0人
sssssss_
一、简介
这个是在上一篇个Demo的升级版：TabLayout和ViewPager实现顶部标签页，在这次中会加入Toolbar工具栏和NavigationView侧滑菜单栏来让界面更加的饱满。
二、效果图
Demo2.gif
三、实现过程
1.新增文件
- nav_header.xml 侧滑菜单的顶部
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="center_horizontal"
android:background="?attr/colorPrimary"
android:padding="10dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/header_iamge"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:src="@drawable/ic_header" />
<TextView
android:id="@+id/header_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/header_iamge"
android:gravity="center_horizontal"
android:text="Tony"
android:textColor="#FFF"
android:textSize="14sp" />
<TextView
android:id="@+id/header_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/header_name"
android:gravity="center_horizontal"
android:text="xxxxxxx@qq.com"
android:textColor="#FFF"
android:textSize="14sp" />
</RelativeLayout>
- nav_menu.xml 侧滑菜单栏的菜单列表
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/backup"
android:icon="@drawable/ic_share"
android:title="Backup"
app:showAsAction="always" />
</menu>
- toolbar_menu.xml 工具栏的分享按钮
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/backup"
android:icon="@drawable/ic_share"
android:title="Backup"
app:showAsAction="always" />
</menu>
2.修改文件
- activity_tablayout2.xml 主界面，主要是添加了DrawerLayout和NavigationView两个控件。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/dra_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toorbar2_id"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary">
<android.support.design.widget.TabLayout
android:id="@+id/tab2_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="#94ec9d"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF">
</android.support.design.widget.TabLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="@+id/vp2_id"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
- TabLayout2.java，这是TabLayout1的升级版，为了更好的区分，所以弄了个升级版本的文件。以下是完整代码，注释也有标明：
public class TabLayout2 extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
private Toolbar mToolbar;
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tablayout2);
//toolbar
mToolbar = findViewById(R.id.toorbar2_id);
setSupportActionBar(mToolbar);
//滑动菜单
mDrawerLayout = findViewById(R.id.dra_layout);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_home);
}
getSupportActionBar().setHomeButtonEnabled(true);
//菜单栏页面
NavigationView navView = findViewById(R.id.nav_view);
//默认指定
// navView.setCheckedItem(R.id.nav_call);
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_call:
mDrawerLayout.closeDrawers();
break;
case R.id.nav_task:
Toast.makeText(getApplicationContext(), "测试nav", Toast.LENGTH_SHORT).show();
}
return true;
}
});
mTabLayout = findViewById(R.id.tab2_id);
mViewPager = findViewById(R.id.vp2_id);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
//使用适配器将ViewPager与Fragment绑定在一起
mViewPager.setAdapter(myFragmentPagerAdapter);
//将TabLayout和ViewPager绑定在一起，相互影响，解放了开发人员对双方变动事件的监听
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.backup:
break;
default:
break;
}
return true;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar_menu, menu);
return true;
}
}
四、总结
整体的界面就在这里了，接下来要做的事情就是问3个Fragment添加具体的内容。
至于demo1里面出现的优化问题，暂时还没有去解决，相信在逻辑都写好的时候，自然就要去面对这个问题，所以是跑不掉的。相信网上也有相关的文章，这个又要考验我们搜索的能力了。
五、参考文章
本章内容只是在原来的基础加了点控件，那么主要是参考的《第一行代码》这本入门书籍的内容，所以做起来也没有难度。
六、项目地址
项目地址和demo1的代码会放在一起，所以地址也是一样的：https://github.com/WangXianSong/TabLayoutDemo
