Android中DrawerLayout+Toolbar实现侧滑效果[DrawerLayout+ToolBar+NavigationView]

工作内容:

1.DrawerLayout+Toolbar实现侧滑效果

2.DrawerLayout+ToolBar+NavigationView实现侧滑效果

涉及类:

v4包中DrawerLayout

v7包中Toolbar

v7包中ActionBarDrawerToggle

实现步骤:按代码提示(代码中有明确标注)

侧滑栏内子控件点击事件:自己去实践哈

layout_drawer.xml(含DrawerLayout的布局文件)

DrawerLayout中的两个LinearLayout,上面一个放置的是主布局,下面一个放置的是侧滑布局(系统默认)

侧滑布局的宽度尽量低于手机屏幕宽度(常见的手机宽度320dp)

<?xml version="1.0" encoding="utf-8"?>
<!--
DrawerLayout最好是做成跟布局之后include引入Activity布局文件
【DrawerLayout没放入跟布局时出错:DrawerLayout must be measured with MeasureSpec.EXACTLY】
DrawerLayout 是一个viewGroup可以放置其他组件
-->
<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/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 主布局 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- tablayout 存放标题栏 -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/orange"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/orange"
            app:tabTextColor="@color/deepskyblue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fillViewport="false"></android.support.design.widget.TabLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"></android.support.v4.view.ViewPager>
        <!-- 春夏秋冬四个TextView -->
        <include
            layout="@layout/layout_fragtest_bottonline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <!-- 侧滑栏布局 -->
    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="侧滑Text"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="侧滑Text"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="侧滑Text"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="侧滑Text"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="侧滑Text"
            android:textSize="20sp" />
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

activity_drawerdemo.xml

界面就顶部一个toolbar,下面是一个DrawerLayout布局文件

(Toolbar中的属性popupTheme—弹出菜单风格,参考前面的文章

<?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=".FragmentTestActivity">
    <!-- toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/darkturquoise"
        app:popupTheme="@style/OverflowMenuStyle">
    </android.support.v7.widget.Toolbar>
    <!-- 引入含DrawerLayout的布局文件 -->
    <include layout="@layout/layout_drawer"/>
</LinearLayout>
DrawerDemoActivity.java

关于ViewPager+Fragment+FragmentPagerAdapter不再赘述,点击参考文章

<span style="font-size:14px;">import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;
import com.plane.people.planebattle.adapter.FragPagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class DrawerDemoActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private FragPagerAdapter fragPagerAdapter;  //碎片适配器
    private List<Fragment> fragments;   //存放碎片Fragment
    private List<String> titles;    //存放标题
    private FragmentManager fm;
    private DrawerLayout drawerLayout;
    private int [] tvIDs = {R.id.tv_sp,R.id.tv_su,R.id.tv_au,R.id.tv_wi};//TextView的id数组
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawerdemo);
        initListener();
        initData();
    }

    /**
     * 1.初始化viewPager和tabLayout
     * 2.添加点击事件
     */
    private void initListener() {
        drawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        viewPager = (ViewPager)findViewById(R.id.viewpager);
        tabLayout = (TabLayout)findViewById(R.id.tablayout);
        for (int i = 0; i < tvIDs.length; i++) {
            findViewById(tvIDs[i]).setOnClickListener(this);
        }
        viewPager.addOnPageChangeListener(this);//设置页面切换监听
        setToolbar();
        <span style="background-color: rgb(153, 255, 153);">//设置完标题栏之后设置
        getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);  //添加返回键
        ActionBarDrawerToggle barDrawerToggle = new
                ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.opensideslip,R.string.closesideslip);
        barDrawerToggle.syncState();//同步状态
        drawerLayout.addDrawerListener(barDrawerToggle);    //添加打开关闭监听</span>
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        return super.dispatchTouchEvent(ev);
    }

    //设置标题栏Toolbar
    private void setToolbar() {
        toolbar.setTitle("凤凰卫士");   //设置标题
        toolbar.setTitleTextColor(Color.WHITE);//设置标题颜色
        toolbar.setSubtitle("新浪消息");    //设置副标题
        toolbar.setSubtitleTextColor(Color.WHITE);  //设置副标题字体颜色
        toolbar.setNavigationIcon(R.drawable.back);
        <span style="background-color: rgb(153, 255, 153);">setSupportActionBar(toolbar);   //必须使用</span>
        //添加menu项点击事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.toolbar_r_img:
                        Log.e("Test---->","点击了右边图标");
                        break;
                    case R.id.toolbar_r_1:
                        Log.e("Test---->","点击了弹出菜单1");
                        break;
                    case R.id.toolbar_r_2:
                        Log.e("Test---->","点击了弹出菜单2");
                        break;
                    case R.id.toolbar_r_3:
                        Log.e("Test---->","点击了弹出菜单3");
                        break;
                }
                return true;    //返回为true
            }
        });
    }
    //设置menu(右边图标)
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu); //解析menu布局文件到menu
        return true;
    }

    //初始化数据
    private void initData() {
        fragments = new ArrayList<>();
        titles = new ArrayList<>();
        fm = getSupportFragmentManager();
        fragments.add(new Fragment_spring());
        fragments.add(new Fragment_summer());
        fragments.add(new Fragment_autumn());
        fragments.add(new Fragment_winter());
        titles.add("春");
        titles.add("夏");
        titles.add("秋");
        titles.add("冬");
        fragPagerAdapter = new FragPagerAdapter(fm,fragments,titles);
        viewPager.setAdapter(fragPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);//标题栏TabLayout关联ViewPager
    }

    /**
     * 实现点击几个TextView显示对应的ViewPager页
     * @param v
     */
    @Override
    public void onClick(View v) {
        for (int i = 0; i < tvIDs.length; i++) {
            if(v.getId() == tvIDs[i]){
                ((TextView)findViewById(tvIDs[i])).setTextColor(Color.CYAN);
            }else {
                ((TextView)findViewById(tvIDs[i])).setTextColor(Color.BLACK);
            }
        }
        switch (v.getId()){
            case R.id.tv_sp:
               viewPager.setCurrentItem(0);
                break;
            case R.id.tv_su:
                viewPager.setCurrentItem(1);
                break;
            case R.id.tv_au:
                viewPager.setCurrentItem(2);
                break;
            case R.id.tv_wi:
                viewPager.setCurrentItem(3);
                break;
        }
    }
    //OnPageChangeListener的实现方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    //OnPageChangeListener的实现方法
    @Override
    public void onPageSelected(int position) {
        for (int i = 0; i < tvIDs.length; i++) {
            if(position == i){
                ((TextView)findViewById(tvIDs[i])).setTextColor(Color.CYAN);
            }else {
                ((TextView)findViewById(tvIDs[i])).setTextColor(Color.BLACK);
            }
        }
    }
    //OnPageChangeListener的实现方法
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}</span>

实现效果:

默认的toolbar中的NavigationIcon会在点击后产生系统默认的动画效果最后展示出侧滑栏的同时按钮变为返回尖头

侧滑注意:

上面的代码实现之后会出现点击侧滑栏中的空白部分会点到下面一层,请做如下处理:【linear是drawerLayout的侧滑栏布局最外层LinearLayout】


侧滑栏的实现【侧滑部分使用NavigationView实现】

DrawerLayout+ToolBar+NavigationView

主布局XML代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    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:openDrawer="start">

    <include
        layout="@layout/layout_content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.NavigationView"
        app:headerLayout="@layout/layout_nav_header_main" //头部布局,对应Java中的navigationView.getHeader(0)
        app:itemIconTint="@color/menu_item_tint"	  //得到View.findViewById来获取头布局中的控件
        app:itemTextColor="@color/menu_item_tint"
        app:menu="@menu/menu_main_drawer" //Menu布局,对应java中的navigationView.getMenu();
        />
</android.support.v4.widget.DrawerLayout>

头部布局xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_140">

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login_github"
        android:textSize="@dimen/sp_20"
        android:textColor="@android:color/white"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        style="@style/Widget.AppCompat.ActionButton"
        android:drawableRight="@drawable/ic_login"
        android:drawablePadding="@dimen/dp_3"
        tools:ignore="RelativeOverlap"/>

    <ImageView
        android:id="@+id/ivIcon"
        android:layout_width="@dimen/dp_50"
        android:layout_height="@dimen/dp_50"
        android:layout_marginRight="@dimen/dp_3"
        android:layout_alignRight="@+id/btnSearch"
        android:layout_alignParentTop="true"
        android:layout_marginTop="@dimen/dp_20"
        android:src="@drawable/ic_avatar"/>

    <Button
        android:id="@+id/btnSearch"
        android:layout_width="@dimen/dp_300"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnLogin"
        android:drawableLeft="@drawable/ic_search"
        android:drawablePadding="@dimen/dp_6"
        android:paddingTop="@dimen/dp_6"
        android:paddingBottom="@dimen/dp_6"
        android:layout_marginTop="@dimen/dp_10"
        android:layout_centerHorizontal="true"
        android:text="@string/search"
        android:gravity="left|center_vertical"
        android:textColor="@android:color/white"
        android:theme="@style/AppTheme.Button.Transparent"/>

</RelativeLayout>

menu布局xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:title="@string/github">
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:id="@+id/github_hot_repo"
                    android:icon="@drawable/ic_hot_repo"
                    android:title="@string/hot_repo"/>
                <item
                    android:id="@+id/github_hot_coder"
                    android:icon="@drawable/ic_hot_coder"
                    android:title="@string/hot_coder"/>
                <item
                    android:id="@+id/github_trend"
                    android:icon="@drawable/ic_trend"
                    android:title="@string/trend"/>
            </group>
        </menu>
    </item>

    <item
        android:title="@string/arsenal">
        <menu>

            <group android:checkableBehavior="single">
            <item
                android:id="@+id/arsenal_my_repo"
                android:icon="@drawable/ic_my_repo"
                android:title="@string/my_repo"/>
            <item
                android:id="@+id/arsenal_recommend"
                android:icon="@drawable/ic_recommend"
                android:title="@string/recommend"/>
            </group>
        </menu>
    </item>

    <item
        android:title="@string/tips_and_tricks">
        <menu>
            <group android:checkableBehavior="single">
            <item
                android:id="@+id/tips_daily"
                android:icon="@drawable/ic_tips"
                android:title="@string/tips_daily"/>
            <item
                android:id="@+id/tips_share"
                android:icon="@drawable/ic_share"
                android:title="@string/share"/>
            </group>
        </menu>
    </item>

</menu>

java代码就不贴了【找侧滑栏中的控件看红色字的部分】

效果图:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值