实现这个动画效果的标题栏主要要用到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,同时三条横线会变成一个回退的箭头