【劍靈攻略】00一、底部菜單欄實現

底部菜單欄實現，先看效果：

 

一、全屏無標題

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">

二、底部菜單佈局文件 action_bar_bottom.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="60dp"
    android:layout_gravity="bottom"
    android:background="@color/actionBarBg"
    android:orientation="horizontal" 
    android:baselineAligned="true">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img_news"
            android:contentDescription="@null"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/tab_btn_sel1" />

        <TextView
            android:id="@+id/txt_news"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/bottom_action_bar_news"
            android:textColor="@color/white" />
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img_video"
            android:contentDescription="@null"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/tab_btn_nor2" />

        <TextView
            android:id="@+id/txt_video"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/bottom_action_bar_video"
            android:textColor="@color/white" />
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img_profession"
            android:contentDescription="@null"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/tab_btn_nor3" />

        <TextView
            android:id="@+id/txt_profession"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/bottom_action_bar_profession"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img_data"
            android:contentDescription="@null"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/tab_btn_nor4" />

        <TextView
            android:id="@+id/txt_data"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/bottom_action_bar_data"
            android:textColor="@color/white" />
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img_more"
            android:contentDescription="@null"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/tab_btn_nor5" />

        <TextView
            android:id="@+id/txt_more"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/bottom_action_bar_more"
            android:textColor="@color/white" />
    </LinearLayout>

</LinearLayout>

View Code

分析佈局：

LinearLayout -->水平排列

　　LinearLayout -->豎直排列

　　　　ImageView

　　　　TextView

　　...

 

三、activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    
    <include
        android:layout_gravity="bottom"
        layout="@layout/action_bar_bottom" />

</LinearLayout>

View Code

 

四、後置代碼

// 實現OnClickListener，監聽點擊事件
public class MainActivity extends Activity implements OnClickListener{
    private ImageView imgNews;
    private ImageView imgVideo;
    private ImageView imgData;
    private ImageView imgProfession;
    private ImageView imgMore;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imgNews = (ImageView) findViewById(R.id.img_news);
        imgVideo = (ImageView) findViewById(R.id.img_video);
        imgProfession = (ImageView) findViewById(R.id.img_profession);
        imgData = (ImageView) findViewById(R.id.img_data);
        imgMore = (ImageView) findViewById(R.id.img_more);
        
        // 給圖片註冊點擊事件監聽器
        imgNews.setOnClickListener(this);
        imgVideo.setOnClickListener(this);
        imgProfession.setOnClickListener(this);
        imgData.setOnClickListener(this);
        imgMore.setOnClickListener(this);
    }
    
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    @Override
    public void onClick(View v) {
        // 全部圖片置爲未選中
        imgNews.setImageResource(R.drawable.tab_btn_nor1);
        imgVideo.setImageResource(R.drawable.tab_btn_nor2);
        imgProfession.setImageResource(R.drawable.tab_btn_nor3);
        imgData.setImageResource(R.drawable.tab_btn_nor4);
        imgMore.setImageResource(R.drawable.tab_btn_nor5);
        
        // 根據點擊的圖片設置
        switch (v.getId()) {
        case R.id.img_news:
            imgNews.setImageResource(R.drawable.tab_btn_sel1);
            break;
        case R.id.img_video:
            imgVideo.setImageResource(R.drawable.tab_btn_sel2);
            break;
        case R.id.img_profession:
            imgProfession.setImageResource(R.drawable.tab_btn_sel3);
            break;
        case R.id.img_data:
            imgData.setImageResource(R.drawable.tab_btn_sel4);
            break;
        case R.id.img_more:
            imgMore.setImageResource(R.drawable.tab_btn_sel5);
            break;
        }
    }

}

View Code