記事ディレクトリ
I.はじめに
- 説明: クリックしてメイン インターフェイスのコンテンツを変更し、非コンテンツ領域をクリックしてジャンプする効果を実現するには、メイン インターフェイスの左側の境界線にメニューが描画されるメイン インターフェイスを設計する必要があります。元のインターフェースの効果を復元します。メニューをポップアップさせるには、実はもっと難しくして、右にスライドするとメニューをポップアップさせることができます。これはちょっと考えてみたい問題ですが、実はこの方法は以前のブログでも何度か使っていますが、初心者がコードをしっかり理解できているかどうか見てみましょう。コードを両手で渡すのではなく、自分で作成してみましょう。
- ナレッジポイント: ツールバーの使用
- 難易度: 簡単
- 効果
2. 理解する
アプリケーション コンテンツの標準ツールバー (画像は公式 Web サイトのツールバーの紹介から引用)。その主要な要素の組み合わせ: ナビゲーション ボタン、ブランド ロゴ イメージ、タイトルとサブタイトル、タイトルとサブタイトル、オプションのオーバーフロー メニュー。
- ナビゲーション ボタン: 上矢印、ナビゲーション メニューの切り替え、閉じる、折りたたむ、完了、または選択に適用されるその他のグリフ。
- ブランドロゴ画像: バーの高さまで拡張でき、幅はお好みに合わせて変更できます。
- タイトルとサブタイトル: ナビゲーション階層内のツールバーの現在位置とそこに含まれるコンテンツへの道しるべです。
- カスタム ビュー: ツールバーにサブビューを追加すると、レイアウト内のこの位置に表示されます。
- オプションのオーバーフロー メニュー: 頻繁な、重要な、または典型的な操作をいくつか提供します
3. エンコーディング
1.UIデザイン
メニューの内容に関しては、いくつかのボタンと写真を追加して修正しただけですが、美しいデザインが必要な場合は、同じ列の [AndroidUI Design] Personal Information Interface ブログを参照して、さらにカスタマイズしたデザインを確認できます。
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerlayout_drawer">
<RelativeLayout
android:id="@+id/drawerlayout_main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/drawer_layout_rl_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="XXX软件"/>
</androidx.appcompat.widget.Toolbar>
<TextView
android:id="@+id/main_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="主界面"
android:textColor="@color/colorAccent"
android:textSize="22sp" />
</RelativeLayout>
<LinearLayout
android:id="@+id/drawerlayout_side_tv"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="vertical">
<!-- 菜单内容 -->
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@drawable/b"/>
<Button
android:id="@+id/user"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text=">我的账号"/>
<Button
android:id="@+id/shezhi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text=">设置"/>
<Button
android:id="@+id/cy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text=">创意"/>
</LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>
2. エンコーディング
ToolbarとActionBarの使用については、公式ソリューションを参照してください。最近少し忙しいので詳しくは紹介しませんが、コピーするだけです（そのまま使っても大丈夫です）。
- コントロールの初期化
コントロールのバインドについては詳しく説明しません。これについては以前のブログで説明しました。主にバグの特定を容易にし、コードの配置を簡素化するために、コードの仕様を常に覚えておいてください。
private DrawerLayout drawerLayout;
private Button user,shezhi,cy;
private TextView title, main;
// 初始化代码
private void init() {
user = findViewById(R.id.user);
shezhi = findViewById(R.id.shezhi);
cy = findViewById(R.id.cy);
title = findViewById(R.id.title_name);
main = findViewById(R.id.main_text);
}
- ナビゲーションコントロール
横スライドメニューのコントロール部分。それぞれナビゲーションボタンの表示/非表示とコンテンツの切り替えを行います（ここではコンテンツを置き換えるだけであり、具体的なデザインについてはニーズに応じて異なります）
private void initToolbar() {
final Toolbar toolbar = findViewById(R.id.drawer_layout_rl_toolbar);
setSupportActionBar(toolbar); //传入ToolBar实例
ActionBar actionBar = getSupportActionBar(); //得到ActionBar实例
if (actionBar != null){
//显示导航按钮
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航按钮图片
actionBar.setHomeAsUpIndicator(R.drawable.j5);
}
drawerLayout = findViewById(R.id.drawerlayout_drawer);
//设置toolbar的导航按钮监听事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//显示侧滑菜单
drawerLayout.openDrawer(GravityCompat.START);
}
});
user.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
title.setText("我的账号");
main.setText("我的账号");
}
});
shezhi.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
title.setText("设置");
main.setText("设置");
}
});
cy.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
title.setText("创意");
main.setText("创意");
}
});
}
- 作成時
ライフサイクル - 初期化、1 回のみ実行
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
initToolbar();
}