【剑灵攻略】001、底部菜单栏实现

底部菜单栏实现，先看效果：

1、全屏无标题

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

2、底部菜单布局文件 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>

分析布局：

LinearLayout -->水平排列

　　LinearLayout -->竖直排列

　　　　ImageView

　　　　TextView

　　...

3、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>

4、后置代码

// 实现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;
        }
    }

}