安卓底部选项卡

浏览数：20 / 时间：2015年06月11日

腾讯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，分别为我的音乐、我的最爱、退出系统的相关界面，在此小编没有做出来，所以还望见谅！

点此下载源代码

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

安卓底部选项卡