tab的實現微信界面

首先定義一個頭部和一個底部

底部就是tab的使用

四個tab，所以使用四個linearlayout

bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<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="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >
    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageButton
            android:id="@+id/tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_fre"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/tab_fre_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_find"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageButton
            android:id="@+id/tab_find_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:clickable="false"
            android:src="@drawable/tab_address" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="發現"
            android:textColor="#ffffff" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <ImageButton
            android:id="@+id/tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:clickable="false"
            android:src="@drawable/tab_settings" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="設置"
            android:textColor="#ffffff" />
    </LinearLayout>
</LinearLayout>

然後就是在主界面裏面把這個底部加入進去，中間就是用了viewpager這個控件

drawable使用以下這樣的XML形式

每一個圖片都有兩種形式

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_address_pressed" />
    <item android:drawable="@drawable/tab_address_normal" />
</selector>

然後就是寫class裏面的東西了

首先就需要定義各種控件，把tab的linearlayout都獲取，把四張圖片都獲取出來，把viewpager獲取

創建一個LayoutInflater佈局調節器用來獲取四個佈局，定義一個佈局的容器，把獲取的四個佈局都加進去，

//view

inflater = LayoutInflater.from(this);

View view1 = inflater.inflate(R.layout.main_tab_weixin, null);

View view2 = inflater.inflate(R.layout.main_tab_fre, null);

View view3 = inflater.inflate(R.layout.main_tab_find, null);

View view4 = inflater.inflate(R.layout.main_tab_setting, null);

liViews = new ArrayList<View>();

liViews.add(view1);

liViews.add(view2);

liViews.add(view3);

liViews.add(view4);

再定義一個PagerAdapter，之後把viewpager綁定適配器

mPagerAdapter = new PagerAdapter() {

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

// TODO Auto-generated method stub

return arg0 == arg1;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return liViews.size();

}

@Override

public void destroyItem(ViewGroup container, int position,

Object object) {

// TODO Auto-generated method stub

container.removeView(liViews.get(position));

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

// TODO Auto-generated method stub

View view = liViews.get(position);

container.addView(view);

return view;

}

};

mViewPager.setAdapter(mPagerAdapter);

這樣就已經完成了畫面的切換了，只是下面的tab還沒有切換

然後就是設置監聽了

在每一次的onclick都先把所有的圖片都變爲暗色

/**

* 將所有的圖片切換成暗色的

private void resetImg() {

// TODO Auto-generated method stub

tab_img1.setImageResource(R.drawable.tab_weixin_normal);

tab_img2.setImageResource(R.drawable.tab_find_frd_normal);

tab_img3.setImageResource(R.drawable.tab_address_normal);

tab_img4.setImageResource(R.drawable.tab_settings_normal);

}

然後再按照onclick的id 來設置每一個圖片

設置一個現在的item，後面的onpagechanglistener會用到

case R.id.tab_weixin:

mViewPager.setCurrentItem(0);

tab_img1.setImageResource(R.drawable.tab_weixin_pressed);

爲viewpager設置一個OnPageChangeListener監聽

並且在onPageSelected設置圖片的切換

mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override

public void onPageSelected(int arg0) {

// TODO Auto-generated method stub

int currentItem = mViewPager.getCurrentItem();

resetImg();

switch (currentItem) {

case 0:

tab_img1.setImageResource(R.drawable.tab_weixin_pressed);

break;

case 1:

tab_img2.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case 2:

tab_img3.setImageResource(R.drawable.tab_address_pressed);

break;

case 3:

tab_img4.setImageResource(R.drawable.tab_settings_pressed);

break;

default:

break;

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

});

這樣就完成了

下面的 java 完整代碼

package com.example.tabdemo_01;

import java.util.ArrayList;

import java.util.List;

import android.R.integer;

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.support.v7.app.ActionBarActivity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.ImageButton;

import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener {

private ViewPager mViewPager;

private ImageButton mImageButton;

private ImageButton tab_img1,tab_img2,tab_img3,tab_img4;

private int currIndex;

private LayoutInflater inflater;

private LinearLayout tab1,tab2,tab3,tab4;

private List<View> liViews;

private PagerAdapter mPagerAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

initView();

initEvents();

}

private void initEvents() {

// TODO Auto-generated method stub

tab1.setOnClickListener(this);

tab2.setOnClickListener(this);

tab3.setOnClickListener(this);

tab4.setOnClickListener(this);

mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override

public void onPageSelected(int arg0) {

// TODO Auto-generated method stub

int currentItem = mViewPager.getCurrentItem();

resetImg();

switch (currentItem) {

case 0:

tab_img1.setImageResource(R.drawable.tab_weixin_pressed);

break;

case 1:

tab_img2.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case 2:

tab_img3.setImageResource(R.drawable.tab_address_pressed);

break;

case 3:

tab_img4.setImageResource(R.drawable.tab_settings_pressed);

break;

default:

break;

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

});

}

private void initView() {

// TODO Auto-generated method stub

mViewPager = (ViewPager) findViewById(R.id.vp_viewpager);

//tab

tab1 = (LinearLayout) findViewById(R.id.tab_weixin);

tab2 = (LinearLayout) findViewById(R.id.tab_fre);

tab3 = (LinearLayout) findViewById(R.id.tab_find);

tab4 = (LinearLayout) findViewById(R.id.tab_setting);

//imgbutton

tab_img1 = (ImageButton) findViewById(R.id.tab_weixin_img);

tab_img2 = (ImageButton) findViewById(R.id.tab_fre_img);

tab_img3 = (ImageButton) findViewById(R.id.tab_find_img);

tab_img4 = (ImageButton) findViewById(R.id.tab_setting_img);

//view

inflater = LayoutInflater.from(this);

View view1 = inflater.inflate(R.layout.main_tab_weixin, null);

View view2 = inflater.inflate(R.layout.main_tab_fre, null);

View view3 = inflater.inflate(R.layout.main_tab_find, null);

View view4 = inflater.inflate(R.layout.main_tab_setting, null);

liViews = new ArrayList<View>();

liViews.add(view1);

liViews.add(view2);

liViews.add(view3);

liViews.add(view4);

mPagerAdapter = new PagerAdapter() {

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

// TODO Auto-generated method stub

return arg0 == arg1;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return liViews.size();

}

@Override

public void destroyItem(ViewGroup container, int position,

Object object) {

// TODO Auto-generated method stub

container.removeView(liViews.get(position));

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

// TODO Auto-generated method stub

View view = liViews.get(position);

container.addView(view);

return view;

}

};

mViewPager.setAdapter(mPagerAdapter);

}

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

resetImg();

switch (v.getId()) {

case R.id.tab_weixin:

mViewPager.setCurrentItem(0);

tab_img1.setImageResource(R.drawable.tab_weixin_pressed);

break;

case R.id.tab_fre:

mViewPager.setCurrentItem(1);

tab_img2.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case R.id.tab_find:

mViewPager.setCurrentItem(2);

tab_img3.setImageResource(R.drawable.tab_address_pressed);

break;

case R.id.tab_setting:

mViewPager.setCurrentItem(3);

tab_img4.setImageResource(R.drawable.tab_settings_pressed);

break;

default:

break;

}

/**

* 將所有的圖片切換成暗色的

private void resetImg() {

// TODO Auto-generated method stub

tab_img1.setImageResource(R.drawable.tab_weixin_normal);

tab_img2.setImageResource(R.drawable.tab_find_frd_normal);

tab_img3.setImageResource(R.drawable.tab_address_normal);

tab_img4.setImageResource(R.drawable.tab_settings_normal);

}

tab的實現微信界面

滑動tab

instance檢驗對象類型

Android java代碼優化問題探究

tab的實現微信界面

slidingMenu

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結