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

it2022-05-08  9

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


最新回复(0)