【剑灵攻略】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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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、后置代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// 实现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; } } }
请注明文章出处[http://www.cnblogs.com/fb-boy/]