(一)开发侧边栏首先设置侧边栏的样式,这里主要通过创建 header.xml 和 menu.main_menu.xml(menu是一个包,与layout平级),并在activity_main.xml中通过NavigationView进行引用。相关代码如下:
header.xml
menu.main_menu.xml
NavigationView相对应代码(下面会贴出全部activity_main.xml代码)
(二)Toolbar主要用于自定义标题栏,首先我们要去掉app原有的标题栏,相关改动在 theam.xml中,其次在activity_main.xml中编写Toolbar相对应的部分。
theam.xml(将原有的 DarkActionBar 改为 NoActionBar)
Toolbar相对应代码(下面会贴出全部activity_main.xml代码)
【Java代码布局在 androidx.appcompat.widget.Toolbar 外可以不加或者加其他布局,但Kotlin中不加 com.google.android.material.appbar.AppBarLayout 布局可能会导致点击无响应问题。建议最好带上该布局】
(三)DrawerLayout用于 activity_main.xml 的主布局,下面贴出完整的 activity_main.xml 代码
activity_main.xml
(四)要在后端代码中实现 drawer 关联 toolbar ,则需要在 string.xml 中加入如下两行代码:
Open navigation drawer Close navigation drawer
(五)Java
Java代码如下,有注释,代码量少,不难看懂
import androidx.annotation.NonNull; import androidx.appcompat.app.ActionBarDrawerToggle; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import androidx.drawerlayout.widget.DrawerLayout; import android.content.Intent; import android.os.Bundle; import android.view.MenuItem; import com.google.android.material.navigation.NavigationView; public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{ DrawerLayout drawerLayout; NavigationView navigationView; Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); drawerLayout = findViewById(R.id.drawer_layout); navigationView = findViewById(R.id.nav_view); toolbar = findViewById(R.id.toolbar); /** * 实现侧边菜单栏 */ setSupportActionBar(toolbar); navigationView.bringToFront(); //触发点击效果 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawerLayout.addDrawerListener(toggle); toggle.syncState(); //同步drawerlayout的状态 /** * 实现侧边菜单栏的点击事件 */ navigationView.setNavigationItemSelectedListener(this); //设置点击监听事件 } @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()){ case R.id.nav_connect: Intent intent = new Intent(MainActivity.this, MainActivity2.class); startActivity(intent); break; case R.id.nav_setting: Intent intent2 = new Intent(MainActivity.this, MainActivity2.class); startActivity(intent2); break; case R.id.nav_user_manager: Intent intent3 = new Intent(MainActivity.this, MainActivity2.class); startActivity(intent3); break; case R.id.nav_back: Intent intent4 = new Intent(MainActivity.this, MainActivity2.class); startActivity(intent4); break; case R.id.nav_explain: Intent intent5 = new Intent(MainActivity.this, MainActivity2.class); startActivity(intent5); break; } return true; } }
(六)Kotlin
相对应的Kotlin代码如下:
import kotlinx.android.synthetic.main.activity_sliding_screen.*
import androidx.annotation.NonNull; import androidx.appcompat.app.ActionBarDrawerToggle; import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import androidx.drawerlayout.widget.DrawerLayout; import android.content.Intent; import android.os.Bundle; import android.view.MenuItem; import com.google.android.material.navigation.NavigationView;
class UIScreen : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener{
/** * 实现侧边菜单栏(drawer关联toolbar) */ setSupportActionBar(toolbar) nav_view.bringToFront() //侧边栏的点击事件(若不设置,侧边栏内部选项无法响应点击动作) val toggle = ActionBarDrawerToggle( this, drawer_layout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) drawer_layout.addDrawerListener(toggle) toggle.syncState() //同步drawerlayout的状态 /** * 实现侧边菜单栏的点击事件 */ nav_view.setNavigationItemSelectedListener(this) //设置点击监听事件
} override fun onNavigationItemSelected(item: MenuItem): Boolean { //TODO("Not yet implemented") when (item.itemId) { R.id.nav_connect -> { val intent = Intent(this@UIScreen, LoginActivity::class.java) startActivity(intent) } R.id.nav_setting -> { val intent2 = Intent(this@UIScreen, LoginActivity::class.java) startActivity(intent2) } R.id.nav_user_manager -> { val intent3 = Intent(this@UIScreen, LoginActivity::class.java) startActivity(intent3) } R.id.nav_back -> { val intent4 = Intent(this@UIScreen, LoginActivity::class.java) startActivity(intent4) } R.id.nav_explain -> { val intent5 = Intent(this@UIScreen, LoginActivity::class.java) startActivity(intent5) } } return true }
}