騰訊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,分別爲我的音樂、我的最愛、退出系統的相關界面,在此小編沒有做出來,所以還望見諒!