Androidのレイアウトでタブバーを作成する

記事のナビゲーションを作成するタブバー

AndroidのTabLayoutを使用してタブバーを作成する

開発中、長い間タブバーの製作に出くわします。タブバーについて話すとき、誰もが考えるのはActivity + Fragmentです。今日はこれについては話しませんが、今日はタブバーの作り方について話します。

1.制作のアイデア：

LinearLayoutコンテナーを使用してスペースを均等に分割し、さまざまな数のラベルで画面をカバーして、マルチモデル適応の目的を達成できるようにします。
TextViewを使用して各ラベルを実装します。ラベルに画像が含まれている場合は、DrawableTopプロパティを使用して設定します。ここでの例には写真があります。
簡単に変更できるように、Styleのパブリックプロパティについて説明します。
ステータスリストを使用して、クリックしてカラー/ハイライト効果を実現します。

2.コード例

レイアウトファイル

レイアウトにactivity_main.xmlを追加します

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            style="@style/TabButton"
            android:id="@+id/tv1"
            android:text="首页"
            android:drawableTop="@drawable/text_pic"/>

        <TextView
            android:id="@+id/tv2"
            style="@style/TabButton"
            android:text="商品"
            android:drawableTop="@drawable/text_pic"/>

        <TextView
            android:id="@+id/tv3"
            android:text="发现"
            android:drawableTop="@drawable/text_pic"
            style="@style/TabButton"/>

        <TextView
            android:id="@+id/tv4"
            android:text="我的"
            android:drawableTop="@drawable/text_pic"
            style="@style/TabButton"/>
    </LinearLayout>
</LinearLayout>

スタイルファイル

styles.xmlに、次のコードブロックを追加します

<style name="TabButton">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@drawable/text_color</item>
    <item name="android:drawablePadding">5dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:background">@drawable/bg_text</item>
</style>

テキストカラーステータスリスト

ドローアブルにtext_color.xmlを追加します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/holo_blue_light"/>
    <item android:color="@android:color/black"/>
</selector>

背景ステータスリスト

ドローアブルにbg_text.xmlを追加します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_light" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</selector>

画像ステータスリスト

ドローアブルにtext_pic.xmlを追加します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@mipmap/ic_choose"/>
    <item android:drawable="@mipmap/ic_unchoose"/>
</selector>

活動中のコード

JavaでMainActivity.javaを作成します

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView tv1;
    private TextView tv2;
    private TextView tv3;
    private TextView tv4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv1 = findViewById(R.id.tv1);
        tv2 = findViewById(R.id.tv2);
        tv3 = findViewById(R.id.tv3);
        tv4 = findViewById(R.id.tv4);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        tv4.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.tv1:
                if (!tv1.isSelected()){
                    tv1.setSelected(true);
                    tv2.setSelected(false);
                    tv3.setSelected(false);
                    tv4.setSelected(false);
                }
                break;
            case R.id.tv2:
                if (!tv2.isSelected()) {
                    tv1.setSelected(false);
                    tv2.setSelected(true);
                    tv3.setSelected(false);
                    tv4.setSelected(false);
                }
                break;
            case R.id.tv3:
                if (!tv3.isSelected()) {
                    tv1.setSelected(false);
                    tv2.setSelected(false);
                    tv3.setSelected(true);
                    tv4.setSelected(false);
                }
                break;
            case R.id.tv4:
                if (!tv4.isSelected()) {
                    tv1.setSelected(false);
                    tv2.setSelected(false);
                    tv3.setSelected(false);
                    tv4.setSelected(true);
                }
                break;
        }
    }
}

ページの切り替えなど、選択した特定の操作をif判定に追加できます。

Androidのレイアウトでタブバーを作成する

1.制作のアイデア：

2.コード例

おすすめ