抽屉动画效果的标题栏以及滑动页面

实现这个动画效果的标题栏主要要用到ToolBar以及ActionBarDrawerToggle
首先在build.gradle中添加依赖如下:

 implementation 'com.android.support:appcompat-v7:26.1.0'

之后在布局中添加一个ToolBar以及主要界面和需要左侧向右滑动出现的布局:

<?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:id="@+id/Linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        />

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/Linear_second"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="CheckBox" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#36F4F4"
            android:orientation="horizontal">

            <ListView
                android:id="@+id/list"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

    </androidx.drawerlayout.widget.DrawerLayout>

</LinearLayout>

这里我们将ListView的属性设置为start,即从左侧出现
随后我们在MainActivity中进行配置:

package com.game.chouti;

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;



public class MainActivity extends AppCompatActivity {
          Toolbar toolbar;
          DrawerLayout drawerLayout;
          ListView listView ;
          CheckBox checkBox;
          TextView textView;
          ActionBarDrawerToggle actionBarDrawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView)findViewById(R.id.textView);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setTitle("抽屉式动画效果");
        toolbar.setSubtitle("向右滑动");
        //设置成当前活动的ActionBar
        setSupportActionBar(toolbar);

         //actionBar的初始化
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        checkBox = (CheckBox)findViewById(R.id.checkBox);
        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                //当点选checkBox时做的事件
                if(b){listView.setBackgroundColor(R.style.AppTheme);
                //当不点选checkBox时做的事件
                }else{listView.setBackgroundColor(R.style.TextAppearance_AppCompat);}
            }
        });


        listView = (ListView)findViewById(R.id.list) ;
        ArrayAdapter<String>adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1,new String[]{"1","2","3"});
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                switch(adapterView.getItemAtPosition(i).toString()){
                    case "1":
                        Toast.makeText(MainActivity.this,"click 1",Toast.LENGTH_SHORT).show();
                        break;
                    case "2":
                        Toast.makeText(MainActivity.this, "click 2", Toast.LENGTH_SHORT).show();
                        break;
                    case "3":
                        Toast.makeText(MainActivity.this, "click 3", Toast.LENGTH_SHORT).show();
                        break;
                        default:
                            break;
                }
            }
        });
        drawerLayout = (DrawerLayout)findViewById(R.id.drawer);
        //actionBatDrawerToggle是“抽屉”开关动画的事件
        actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close){
            //当关闭时设置的事件
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                Toast.makeText(MainActivity.this, "close Toggle", Toast.LENGTH_SHORT).show();
            }
            //当拉开时设置的事件
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                Toast.makeText(MainActivity.this, "open Toggle", Toast.LENGTH_SHORT).show();
            }
        };
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();

    }
}

actionBatDrawerToggle是“抽屉”开关动画的事件,需要在string文件中对open和close进行设置;
将ToolBar设置为当前的ActionBar需要在代码中进行设置配置,同时还需要在styles.xml中将原有的ActionBar取消掉,否则会报错
在这里插入图片描述
这里用NoActionBar这个参数来将原有的取消掉

呈现的效果如下:
在这里插入图片描述
可以看出左上角是三条横线
当我们从左侧向右滑动屏幕或是点击三条横线时,会出现我们之前配置的listView,同时三条横线会变成一个回退的箭头
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值