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

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結