效果图
当然只是一个简单的demo
接下来就是主界面布局了
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.appnews.activity.MainActivity">
<include
layout="@layout/toolbar_layout"
/>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="50dp">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
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"
android:layout_width="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header_layout"
android:layout_height="match_parent">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
可以看到,这里使用了Drawerlayout,LinearLayout的内容为主页面内容,通过android:layout_gravity属性来确定菜单的位置其中对应的值:
android:layout_gravity="start"
android:layout_gravity="left"
都代表左侧菜单,反之end和right代表右侧菜单
在Drawerlayout上面使用了一个ToolBar控件,使用include标签添加布局:
<?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="50dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/main_toolbar"
android:background="@color/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.Toolbar>
</LinearLayout>
其中theme属性使用了高亮白色。当然有关toolbar的使用,大家可以查看其它相关资料
在主界面的布局中,我们使用了NavigationView作为左侧菜单界面,在NavigationView中可以添加一个Menu和一个头布局,通过属性:
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header_layout"
nav_menu中的布局:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:checkableBehavior="single"
>
<item
android:id="@+id/news"
android:icon="@mipmap/news"
android:title="新闻"
/>
<item
android:id="@+id/collect"
android:icon="@mipmap/collect"
android:title="收藏"
/>
<item
android:id="@+id/followup"
android:icon="@mipmap/followup"
android:title="跟帖"
/>
<item
android:id="@+id/local"
android:icon="@mipmap/local"
android:title="本地"
/>
<item
android:id="@+id/image"
android:icon="@mipmap/image"
android:title="图片"
/>
</group>
</menu>
android:checkableBehavior=”single”此属性代表一次只能选择一个。
nav_header_layout中的布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@drawable/shape_nav_bg"
>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_gravity="center"
android:layout_width="110dp"
android:layout_height="110dp"
android:src="@color/white"
/>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_gravity="center"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@mipmap/user"
/>
<TextView
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="@color/white"
android:text="点击登录"
/>
</FrameLayout>
布局中的圆需要添加依赖
compile 'de.hdodenhof:circleimageview:2.1.0'
主界面代码
public class MainActivity extends AppCompatActivity {
Button bt_open;
DrawerLayout drawer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initEvent();
}
}
private void initEvent() {
title="新闻";
//将toolbar代替actionbar
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
//显示home,返回箭头
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setTitle("新闻");
ActionBarDrawerToggle drawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,
R.string.open_drawer,R.string.close_drawer){
@Override
public void onDrawerOpened(View drawerView) {
actionBar.setTitle("菜单");
}
@Override
public void onDrawerClosed(View drawerView) {
actionBar.setTitle(title);
}
};
//不显示箭头,显示三条横线
drawerToggle.syncState();
//设置打开关闭的监听
drawerLayout.addDrawerListener(drawerToggle);
//侧滑菜单,默认选中新闻
nav.getMenu().getItem(0).setChecked(true);
//设置菜单item选中监听
nav.setNavigationItemSelectedListener(navigationItemSelectedLsitener);
}
NavigationView.OnNavigationItemSelectedListener navigationItemSelectedLsitener=new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.news:
title="新闻";
//关闭左侧菜单
drawerLayout.closeDrawer(Gravity.START);
break;
case R.id.collect:
title="收藏";
drawerLayout.closeDrawer(Gravity.START);
break;
case R.id.followup:
break;
case R.id.local:
break;
case R.id.image:
break;
}
return true;
}
};
代码有点多,通过ActionBarDrawerToggle的对象来设置drawerLayout的监听,可以重写一些方法。drawerToggle.syncState()显示三条横线,避免显示的只有箭头。NavigationView也有自己的Item选择监听。
其中关于TabLayout+ViewPager+Fragment,可以查看上一个博客。