安卓底部选项卡
腾讯QQ有了更新，在自己的手机上更新了一下，试运行了一段时间，被底部的选项卡给深深的迷住了。于是，有了去做做它的原始冲动与欲望，在历经一个早上的琢磨，终于实现了，贴上来，作为给大家的春节祝福吧，在此，小编给大家拜年了，祝大家在新的一年马上有车，马上有房，马上有钱，马上有对象，同时也对浏览我文章的看客表示深深的谢意！
本实例是基于一个手头即将开始的项目为依据的，实现后的效果如下图：
由于小编的水平有限，各方面做的还不是很满意，不过小编会继续努力！下面来看看小编是怎么实现的吧：
1、启动界面
启动界面很简单，就一张图片，布局文件源码为：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/appstart" >
</LinearLayout>Activity代码为：
package com.lzugis.mymusic;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
public class StartActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_start);
new Handler().postDelayed(new Runnable(){
public void run(){
Intent intent = new Intent (StartActivity.this,MainActivity.class);
startActivity(intent);
StartActivity.this.finish();
}
}, 2000);
}
}说明一下啊，就是启动界面显示一会出现主界面，很简单，就不说了。
2、主界面
选项卡布局界面：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainweixin"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#eee" >
<RelativeLayout
android:id="@+id/main_bottom"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:background="#fff"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="2dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_music_press" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的音乐"
android:textColor="#555"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_love"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_love_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的最爱"
android:textColor="#555"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_exit_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="退出系统"
android:textColor="#555"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="@id/main_bottom"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/tabpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
</android.support.v4.view.ViewPager>
</LinearLayout>
</RelativeLayout>很简单的了，就不解释了。下面看看Activity的实现代码
package com.lzugis.mymusic;
import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ViewPager mTabPager;
private ImageView mTabMusic,mTabLove,mTabExit;
private int currIndex = 0;// 当前页卡编号
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabPager = (ViewPager)findViewById(R.id.tabpager);
mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());
mTabMusic = (ImageView) findViewById(R.id.img_music);
mTabLove = (ImageView) findViewById(R.id.img_love);
mTabExit = (ImageView) findViewById(R.id.img_exit);
mTabMusic.setOnClickListener(new MyOnClickListener(0));
mTabLove.setOnClickListener(new MyOnClickListener(1));
mTabExit.setOnClickListener(new MyOnClickListener(2));
//将要分页显示的View装入数组中
LayoutInflater mLi = LayoutInflater.from(this);
View viewMusic = mLi.inflate(R.layout.activity_music, null);
View viewLove = mLi.inflate(R.layout.activity_love, null);
View viewExit = mLi.inflate(R.layout.activity_exit, null);
//每个页面的view数据
final ArrayList<View> views = new ArrayList<View>();
views.add(viewMusic);
views.add(viewLove);
views.add(viewExit);
//填充ViewPager的数据适配器
PagerAdapter mPagerAdapter = new PagerAdapter()
{
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return views.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position));
return views.get(position);
}
};
mTabPager.setAdapter(mPagerAdapter);
}
/**
* 头标点击监听
*/
public class MyOnClickListener implements View.OnClickListener
{
private int index = 0;
public MyOnClickListener(int i)
{
index = i;
}
@Override
public void onClick(View v)
{
mTabPager.setCurrentItem(index);
}
};
/**
* 页卡切换监听
*/
public class MyOnPageChangeListener implements OnPageChangeListener
{
@Override
public void onPageSelected(int arg0)
{
switch (arg0)
{
case 0:
{
mTabMusic.setImageDrawable(getResources().getDrawable(R.drawable.tab_music_press));
if (currIndex == 1)
{
mTabLove.setImageDrawable(getResources().getDrawable(R.drawable.tab_love_normal));
}
else if (currIndex == 2)
{
mTabExit.setImageDrawable(getResources().getDrawable(R.drawable.tab_exit_normal));
}
break;
}
case 1:
{
mTabLove.setImageDrawable(getResources().getDrawable(R.drawable.tab_love_press));
if (currIndex == 0)
{
mTabMusic.setImageDrawable(getResources().getDrawable(R.drawable.tab_music_normal));
}
else if (currIndex == 2)
{
mTabExit.setImageDrawable(getResources().getDrawable(R.drawable.tab_exit_normal));
}
break;
}
case 2:
{
mTabExit.setImageDrawable(getResources().getDrawable(R.drawable.tab_exit_press));
if (currIndex == 0)
{
mTabMusic.setImageDrawable(getResources().getDrawable(R.drawable.tab_music_normal));
}
else if (currIndex == 1)
{
mTabLove.setImageDrawable(getResources().getDrawable(R.drawable.tab_love_normal));
}
break;
}
}
currIndex = arg0;
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}里面的解释很详细，就不解释了。接下来你就需要新建三个对应的Android Activity，分别为我的音乐、我的最爱、退出系统的相关界面，在此小编没有做出来，所以还望见谅！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014年01月17日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读