码迷,mamicode.com
首页 > 微信 > 详细

仿微信主页的切换

时间:2015-09-05 22:02:44      阅读:654      评论:0      收藏:0      [点我收藏+]

标签:

0.效果

技术分享                            技术分享

1.创建首页的Activity

public class MaintabActivity extends FragmentActivity implements OnTabChangeListener {
    
    private FragmentTabHost tabHost;
    
    //定义 每个Tab的 Tag  --- start
    private final static String TAG_CHAT = "chat";
    
    private final static String TAG_CONTACTS = "contacts";
    
    private final static String TAG_DISCOVER = "discover";
    
    private final static String TAG_ME = "me";
    // 定义 每个Tab的 Tag  --- end
    
    // 定义 每个Tab展示的View   --- start
    private TabIndicator chatIndicator;
    
    private TabIndicator contactsIndicator;
    
    private TabIndicator discoverIndicator;
    
    private TabIndicator meIndicator;
    // 定义 每个Tab展示的View   --- end
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        setContentView(R.layout.activity_main);
        
        initIndicator();
        
        initTabHost();
    }
    
    /**
     * 初始化 TabHost
     */
    private void initTabHost() {
        // 1. 初始化TabHost
        tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        tabHost.setup(this, getSupportFragmentManager(), R.id.homeTabContent);
        
        // 2.1 创建聊天TabSpec
        TabSpec chatTabSpec = tabHost.newTabSpec(TAG_CHAT);
        chatTabSpec.setIndicator(chatIndicator);
        
        // 2.2 创建联系人TabSpec
        TabSpec contactsTabSpec = tabHost.newTabSpec(TAG_CONTACTS);
        contactsTabSpec.setIndicator(contactsIndicator);
        
        // 2.3 创发现TabSpec
        TabSpec discoverTabSpec = tabHost.newTabSpec(TAG_DISCOVER);
        discoverTabSpec.setIndicator(discoverIndicator);
        
        // 2.4 创我TabSpec
        TabSpec meTabSpec = tabHost.newTabSpec(TAG_ME);
        meTabSpec.setIndicator(meIndicator);
        
        // 3. 添加 TabSpec
        tabHost.addTab(chatTabSpec,ChatFragment.class,null);
        tabHost.addTab(contactsTabSpec,ContactsFragment.class,null);
        tabHost.addTab(discoverTabSpec,DiscoverFragment.class,null);
        tabHost.addTab(meTabSpec,MeFragment.class,null);
        
        // 4.去掉 每个Tab后面的 竖线
        tabHost.getTabWidget().setDividerDrawable(null);
        
        // 5. 设置初始化选中的Tab 
        tabHost.setCurrentTabByTag(TAG_CHAT);
        chatIndicator.setCurrentFocus(true);
        
        // 6.给每个Tab添加监听器
        tabHost.setOnTabChangedListener(this);
    }
    
    /**
     * 初始化每个需要展示的View
     */
    private void initIndicator(){
        chatIndicator = new TabIndicator(this);
        chatIndicator.setTabHit("微信");
        chatIndicator.setTabIcon(R.drawable.tab_icon_chat_normal, R.drawable.tab_icon_chat_focus);
        
        contactsIndicator = new TabIndicator(this);
        contactsIndicator.setTabHit("通讯录");
        contactsIndicator.setTabIcon(R.drawable.tab_icon_contact_normal, R.drawable.tab_icon_contact_focus);
        contactsIndicator.setUnread(1);
        
        discoverIndicator = new TabIndicator(this);
        discoverIndicator.setTabHit("发现");
        discoverIndicator.setTabIcon(R.drawable.tab_icon_discover_normal, R.drawable.tab_icon_discover_focus);
        
        meIndicator = new TabIndicator(this);
        meIndicator.setTabHit("我");
        meIndicator.setTabIcon(R.drawable.tab_icon_me_normal, R.drawable.tab_icon_me_focus);
    }
    
    /**
     * 每个Tab的点击监听
     */
    @Override
    public void onTabChanged(String tabId) {
        
        buildIndicator();
        
        // 点击微信的Tab
        if(tabId.equals(TAG_CHAT)){
            chatIndicator.setTabSelected(true);
        }
        
        // 点击联系人的Tab
        if(tabId.equals(TAG_CONTACTS)){
            contactsIndicator.setTabSelected(true);
        }
        
        // 点击发现的Tab
        if(tabId.equals(TAG_DISCOVER)){
            discoverIndicator.setTabSelected(true);
        }
        
        // 点击我的Tab
        if(tabId.equals(TAG_ME)){
            meIndicator.setTabSelected(true);
        }
    }
    
    /**
     * 点击之后先将全部的设置为非点击状态
     */
    private void buildIndicator() {
        chatIndicator.setTabSelected(false);
        contactsIndicator.setTabSelected(false);
        discoverIndicator.setTabSelected(false);
        meIndicator.setTabSelected(false);
    }
}

创建首页Activity的布局页面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/homeTabContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="#FFF1F1F1" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

2.创建每个Tab显示的自定义View,在layout目录下新建tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="54dip"
    android:layout_marginLeft="-3dip"
    android:layout_marginRight="-3dip"
    android:layout_weight="1" >

    <LinearLayout
        android:id="@+id/ll_tab_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/tab_indicator_icon"
            android:layout_width="34dp"
            android:layout_height="34dp"
            android:contentDescription="@null"
            android:src="@drawable/tab_icon_me_normal" />

        <TextView
            android:id="@+id/tab_indicator_hint"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="aaaa"
            android:textSize="12sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/tab_indicator_unread"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/ll_tab_info"
        android:layout_marginRight="3dp"
        android:layout_marginTop="3dp"
        android:background="@drawable/action_unread_icon"
        android:gravity="center"
        android:text="1"
        android:textColor="#ffffffff"
        android:textSize="10sp" />
</RelativeLayout>

创建自定义View对象

/**
 * 创建自定义View
 * @author chenhao24
 *
 */
public class TabIndicator extends RelativeLayout {

    private ImageView ivTabIcon;

    private TextView tvTabHint;

    private TextView tvTabUnRead;

    private int focusId = -1;
    
    private int normalId = -1;

    private int unreadCount = 0;

    public TabIndicator(Context context) {
        this(context, null);
    }

    public TabIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);

        View.inflate(context, R.layout.tab_indicator, this);
        
        ivTabIcon = (ImageView) findViewById(R.id.tab_indicator_icon);
        
        tvTabHint = (TextView) findViewById(R.id.tab_indicator_hint);
        
        tvTabUnRead = (TextView) findViewById(R.id.tab_indicator_unread);

        setUnread(0);
    }

    public void setTabIcon(int normalId, int focusId) {
        this.normalId = normalId;
        this.focusId = focusId;
    }

    public void setTabHit(String text) {
        tvTabHint.setText(text);
    }

    public void setUnread(int unreadCount) {
        this.unreadCount = unreadCount;

        if (unreadCount <= 0) {
            tvTabUnRead.setVisibility(View.GONE);
        } else {
            if (unreadCount >= 100) {
                tvTabUnRead.setText("99+");
            } else {
                tvTabUnRead.setText("" + unreadCount);
            }
            tvTabUnRead.setVisibility(View.VISIBLE);
        }
    }

    public int getUnreadCount() {
        return this.unreadCount;
    }

    public void setCurrentFocus(boolean current) {
        if (current) {
            if (focusId != -1) {
                ivTabIcon.setImageResource(focusId);
            }
        } else {
            if (normalId != -1) {
                ivTabIcon.setImageResource(normalId);
            }
        }
    }

    // 设置选中
    public void setTabSelected(boolean selected) {
        if (selected) {
            ivTabIcon.setImageResource(focusId);
        } else {
            ivTabIcon.setImageResource(normalId);
        }
    }
}

3. 创建几个展示区域的自定义Fragment

public class ChatFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        
        View view = inflater.inflate(R.layout.show_info, container,false);
        
        TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);
        
        tvInfo.setText("这里显示微信的列表");
        
        return view;
    }
}
public class ContactsFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        
        View view = inflater.inflate(R.layout.show_info, container,false);
        
        TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);
        
        tvInfo.setText("这里显示联系人的列表");
        
        return view;
    }
}
public class DiscoverFragment extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        
        View view = inflater.inflate(R.layout.show_info, container,false);
        
        TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);
        
        tvInfo.setText("这里显示发现的列表");
        
        return view;
    }
}
public class MeFragment extends Fragment{
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        
        View view = inflater.inflate(R.layout.show_info, container,false);
        
        TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);
        
        tvInfo.setText("这里显示我的列表");
        
        return view;
    }
}

简单的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/tv_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="内容显示区域" />
</LinearLayout>

 

相关资源文件

技术分享技术分享技术分享技术分享技术分享技术分享技术分享技术分享技术分享

 可能会遇到的错误:

java.lang.IllegalStateException: No tab content FrameLayout found for id xxxxx

解决:换个新的android-support-v4.jar,覆盖原来的

 

代码地址: https://github.com/cbooy/FragmentTabHostDemo

仿微信主页的切换

标签:

原文地址:http://www.cnblogs.com/cbooy/p/4783913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!