26两种主界面的设计

最新推荐文章于 2024-08-14 14:18:27 发布

sadsadsadsadsazcAS

最新推荐文章于 2024-08-14 14:18:27 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： IM即时通讯项目

本文链接：https://blog.youkuaiyun.com/chenfuduo_loveit/article/details/42262831

IM即时通讯项目专栏收录该内容

102 篇文章

订阅专栏

两种均模仿了微信6.0底部菜单栏的效果，第一种在左右滑动的时候有动画，第二种没有，首先看第一种：

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:im="http://schemas.android.com/apk/res/com.dystu.impro"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f0eb"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_above="@id/main_bottom"
        android:background="#22000000" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
       android:background="@drawable/tabbg"
        android:orientation="horizontal" >

        <com.dystu.impro.widget.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_one"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            im:icon="@drawable/aio"
            im:text="超信"
            im:text_size="12sp" />

        <com.dystu.impro.widget.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_two"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            im:icon="@drawable/aim"
            im:text="通讯录"
            im:text_size="12sp" />

        <com.dystu.impro.widget.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_three"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            im:icon="@drawable/aiq"
            im:text="发现"
            im:text_size="12sp" />

        <com.dystu.impro.widget.ChangeColorIconWithTextView
            android:id="@+id/id_indicator_four"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:padding="5dp"
            im:icon="@drawable/ais"
            im:text="设置"
            im:text_size="12sp" />
    </LinearLayout>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="icon" format="reference" />
    <attr name="color" format="color" />
    <attr name="text" format="string" />
    <attr name="text_size" format="dimension" />

    <declare-styleable name="ChangeColorIconView">
        <attr name="icon" />
        <attr name="color" />
        <attr name="text" />
        <attr name="text_size" />
    </declare-styleable>

</resources>

注意命名空间的写法。图片资源可以下载微信的apk文件，解压缩，在文件r下的子文件q下有资源图片。

类：

package com.dystu.impro.activity;

import java.util.ArrayList;
import java.util.List;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;

import com.dystu.impro.R;
import com.dystu.impro.fragment.ChatAllHistoryFragment;
import com.dystu.impro.fragment.ContactlistFragment;
import com.dystu.impro.fragment.FindFragment;
import com.dystu.impro.fragment.SettingsFragment;
import com.dystu.impro.widget.ChangeColorIconWithTextView;

/**
 * 
 * 测试微信的底部菜单栏使用
 * 
 * @author
 *
 */

public class CopyOfMainActivity extends BaseActivity implements
		OnPageChangeListener,OnClickListener{
	
	
	private ViewPager mViewPager;
	private List<Fragment> mTabs = new ArrayList<Fragment>();
	private FragmentPagerAdapter mAdapter;
	private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();
	
	private ContactlistFragment contactListFragment;
	private ChatAllHistoryFragment chatHistoryFragment;
	private SettingsFragment settingFragment;
	private FindFragment findFragment;
	
	

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.copyofactivity_main);
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

		initDatas();

		mViewPager.setAdapter(mAdapter);
		mViewPager.setOnPageChangeListener(this);
	}

	private void initDatas() {
		contactListFragment = new ContactlistFragment();
		chatHistoryFragment = new ChatAllHistoryFragment();
		settingFragment = new SettingsFragment();
		findFragment = new FindFragment();

		mTabs.add(chatHistoryFragment);
		mTabs.add(contactListFragment);
		mTabs.add(findFragment);
		mTabs.add(settingFragment);
		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
		{

			@Override
			public int getCount()
			{
				return mTabs.size();
			}

			@Override
			public Fragment getItem(int arg0)
			{
				return mTabs.get(arg0);
			}
		};

		initTabIndicator();
		
	}

	private void initTabIndicator() {
		ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_one);
		ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_two);
		ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_three);
		ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(R.id.id_indicator_four);

		mTabIndicator.add(one);
		mTabIndicator.add(two);
		mTabIndicator.add(three);
		mTabIndicator.add(four);

		one.setOnClickListener(this);
		two.setOnClickListener(this);
		three.setOnClickListener(this);
		four.setOnClickListener(this);

		one.setIconAlpha(1.0f);
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		
	}

	@Override
	public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
		if (positionOffset > 0)
		{
			ChangeColorIconWithTextView left = mTabIndicator.get(position);
			ChangeColorIconWithTextView right = mTabIndicator.get(position + 1);

			left.setIconAlpha(1 - positionOffset);
			right.setIconAlpha(positionOffset);
		}

	}

	@Override
	public void onPageSelected(int arg0) {
		
	}

	@Override
	public void onClick(View v) {
		resetOtherTabs();

		switch (v.getId())
		{
		case R.id.id_indicator_one:
			mTabIndicator.get(0).setIconAlpha(1.0f);
			mViewPager.setCurrentItem(0, false);
			break;
		case R.id.id_indicator_two:
			mTabIndicator.get(1).setIconAlpha(1.0f);
			mViewPager.setCurrentItem(1, false);
			break;
		case R.id.id_indicator_three:
			mTabIndicator.get(2).setIconAlpha(1.0f);
			mViewPager.setCurrentItem(2, false);
			break;
		case R.id.id_indicator_four:
			mTabIndicator.get(3).setIconAlpha(1.0f);
			mViewPager.setCurrentItem(3, false);
			break;

		}
	}

	/**
	 * 重置其他的Tab
	 */
	private void resetOtherTabs()
	{
		for (int i = 0; i < mTabIndicator.size(); i++)
		{
			mTabIndicator.get(i).setIconAlpha(0);
		}
	}

}

四个Fragment差不多一样：（举一个例子）

：

package com.dystu.impro.fragment;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ChatAllHistoryFragment extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		TextView textView = new TextView(getActivity());
		textView.setTextSize(20);
		textView.setBackgroundColor(Color.parseColor("#ffffffff"));
		textView.setGravity(Gravity.CENTER);
		textView.setText("ChatAllHistoryFragment");
		return textView;
	}

}

效果图：

第二种：

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
     android:background="#f2f0eb"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <LinearLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_alignParentBottom="true"
        android:background="#FCFCFC"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

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

            <Button
                android:id="@+id/btn_conversation"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@null"
                android:drawableTop="@drawable/tab_chat_bg"
                android:onClick="onTabClicked"
                android:paddingBottom="2dip"
                android:paddingTop="7dip"
                android:scaleType="matrix"
                android:text="超信"
                android:textColor="#88000000"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/unread_msg_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:background="@drawable/unread_count_bg"
                android:gravity="center"
                android:text="7"
                 android:layout_marginTop="5dp"
                android:textColor="@android:color/white"
                android:textSize="12sp"
                android:visibility="visible" />
            <!-- android:visibility="invisible" -->
        </RelativeLayout>

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

            <Button
                android:textColor="#88000000"
                android:id="@+id/btn_address_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@null"
                android:drawableTop="@drawable/tab_contact_list_bg"
                android:onClick="onTabClicked"
                android:paddingBottom="2dip"
                android:paddingTop="7dip"
                android:scaleType="matrix"
                android:text="通讯录"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/unread_address_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:background="@drawable/unread_count_bg"
                android:gravity="center"
                android:text="7"
                 android:layout_marginTop="5dp"
                android:textColor="@android:color/white"
                android:textSize="12sp"
                android:visibility="visible" />
             <!-- android:visibility="invisible" -->
        </RelativeLayout>

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

            <Button
                android:textColor="#88000000"
                android:id="@+id/btn_find_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@null"
                android:drawableTop="@drawable/tab_find_bg"
                android:onClick="onTabClicked"
                android:paddingBottom="2dip"
                android:paddingTop="7dip"
                android:scaleType="matrix"
                android:text="发现"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/unread_find_number"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_alignParentRight="true"
                android:layout_marginRight="18dp"
                android:layout_marginTop="5dp"
                android:background="@drawable/afv"
                android:gravity="center"
                android:textColor="@android:color/white"
                android:textSize="12sp"
                android:visibility="visible" />
        </RelativeLayout>

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

            <Button
                android:textColor="#88000000"
                android:id="@+id/btn_setting"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@null"
                android:drawableTop="@drawable/tab_setting_bg"
                android:onClick="onTabClicked"
                android:paddingBottom="2dip"
                android:paddingTop="7dip"
                android:scaleType="matrix"
                android:text="设置"
                android:textSize="12sp" />
        </RelativeLayout>
    </LinearLayout>

   <!--  <RelativeLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/main_bottom" /> -->
    
    
    <View  
        android:id="@+id/line"  
        android:layout_width="match_parent"  
        android:layout_height="1px"  
        android:layout_above="@id/main_bottom"  
        android:background="#22000000" />  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/content_pager"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:layout_above="@id/line"  
        android:fadingEdge="none"  
        android:overScrollMode="never" >  
    </android.support.v4.view.ViewPager>  

</RelativeLayout>

类：

package com.dystu.impro.activity;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

import com.dystu.impro.R;
import com.dystu.impro.fragment.ChatAllHistoryFragment;
import com.dystu.impro.fragment.ContactlistFragment;
import com.dystu.impro.fragment.FindFragment;
import com.dystu.impro.fragment.SettingsFragment;

public class MainActivity extends BaseActivity {

	protected static final String TAG = "MainActivity";

	// ========================================================================

	private View btn_container_conversation, btn_container_address_list,
			btn_container_find, btn_container_setting;

	private Button btn_conversation, btn_address_list, btn_find_list,
			btn_setting;

	// ====================底部菜单栏的提醒，默认是不可见的================================

	// 未读消息textview
	private TextView unreadLabel;
	// 未读通讯录textview
	private TextView unreadAddressLable;
	// "发现"的小圆点
	private TextView unreadFindNumber;
	// ===========================================================

	// ====================新的Fragment=================================

	private ContactlistFragment contactListFragment;
	private ChatAllHistoryFragment chatHistoryFragment;
	private SettingsFragment settingFragment;
	private FindFragment findFragment;
	// ============================================================

	private ArrayList<Fragment> mFragmentList;

	private ViewPager mainPager;

	// =============================================================

	private FragmentManager mFragmentManager;

	// ===========================================================

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 界面初始函数，用来获取定义的各控件对应的ID
		initView();

	}

	// =========================================

	private void updataBottomStatu(int index) {  
        switch (index) {  
        case 0:  
            if (!btn_container_conversation.isSelected()) {  
                setConver(true);
                setAddre(false);
                setFind(false);
                setMine(false);
            }  
            break;  
        case 1:  
            if (!btn_container_address_list.isSelected()) {  
            	 setConver(false);
                 setAddre(true);
                 setFind(false);
                 setMine(false);
            }  
            break;  
        case 2:  
            if (!btn_container_find.isSelected()) {  
            	 setConver(false);
                 setAddre(false);
                 setFind(true);
                 setMine(false);
            }  
            break;  
        case 3:  
            if (!btn_container_setting.isSelected()) {  
            	 setConver(false);
                 setAddre(false);
                 setFind(false);
                 setMine(true);
            }  
            break;  
        }  
    }  

	// ========================================

	class MainPagerAdapter extends FragmentStatePagerAdapter {
		 public MainPagerAdapter(FragmentManager fm) {  
	            super(fm);  
	        }  
	  
	        @Override  
	        public Fragment getItem(int arg0) {  
	            return mFragmentList.get(arg0);  
	        }  
	  
	        @Override  
	        public int getCount() {  
	            return mFragmentList == null ? 0 : mFragmentList.size();  
	        }  
	  
	        @Override  
	        public void destroyItem(ViewGroup container, int position, Object object) {  
	  
	        }  
	}

	/**
	 * 初始化组件
	 */
	private void initView() {

		BottomItemOnClickListener mClickListener = new BottomItemOnClickListener();

		unreadLabel = (TextView) findViewById(R.id.unread_msg_number);
		unreadAddressLable = (TextView) findViewById(R.id.unread_address_number);
		unreadFindNumber = (TextView) findViewById(R.id.unread_find_number);

		btn_container_conversation = findViewById(R.id.btn_container_conversation);
		btn_container_address_list = findViewById(R.id.btn_container_address_list);
		btn_container_find = findViewById(R.id.btn_container_find);
		btn_container_setting = findViewById(R.id.btn_container_setting);

		btn_conversation = (Button) findViewById(R.id.btn_conversation);
		btn_address_list = (Button) findViewById(R.id.btn_address_list);
		btn_find_list = (Button) findViewById(R.id.btn_find_list);
		btn_setting = (Button) findViewById(R.id.btn_setting);

		btn_container_conversation.setOnClickListener(mClickListener);
		btn_container_address_list.setOnClickListener(mClickListener);
		btn_container_find.setOnClickListener(mClickListener);
		btn_container_setting.setOnClickListener(mClickListener);

		
		
		mFragmentManager = getSupportFragmentManager();
		
		
		
		contactListFragment = new ContactlistFragment();
		chatHistoryFragment = new ChatAllHistoryFragment();
		settingFragment = new SettingsFragment();
		findFragment = new FindFragment();

		mFragmentList = new ArrayList<Fragment>();
		mFragmentList.add(chatHistoryFragment);
		mFragmentList.add(contactListFragment);
		mFragmentList.add(findFragment);
		mFragmentList.add(settingFragment);
		mainPager = (ViewPager) findViewById(R.id.content_pager);
		mainPager.setAdapter(new MainPagerAdapter(mFragmentManager));
		// 初始化
		mainPager.setCurrentItem(0);
		updataBottomStatu(0);

		/**
		 * 若禁止ViewPager滑动可以自定义ViewPager重写scrollTo方法
		 */
		mainPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				updataBottomStatu(position);
			}

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

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});

	}
	
	

	protected class BottomItemOnClickListener implements OnClickListener {
		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.btn_container_conversation: {
				mainPager.setCurrentItem(0);
				updataBottomStatu(0);
			}
				break;
			case R.id.btn_container_address_list: {
				mainPager.setCurrentItem(1);
				updataBottomStatu(1);
			}
				break;
			case R.id.btn_container_find: {
				mainPager.setCurrentItem(2);
				updataBottomStatu(2);
			}
				break;
			case R.id.btn_container_setting: {
				mainPager.setCurrentItem(3);
				updataBottomStatu(3);
			}
				break;

			}
		}
	}
	
	
	 private void setConver(boolean isSelect) {  
		 btn_container_conversation.setSelected(isSelect);  
		 unreadLabel.setSelected(isSelect);  
		 btn_conversation.setSelected(isSelect);  
	    }  
	  
	    private void setAddre(boolean isSelect) {  
	    	btn_container_address_list.setSelected(isSelect);  
	    	btn_address_list.setSelected(isSelect);  
	    	unreadAddressLable.setSelected(isSelect);  
	    }  
	  
	    private void setFind(boolean isSelect) {  
	    	btn_container_find.setSelected(isSelect);  
	    	btn_find_list.setSelected(isSelect);  
	    	unreadFindNumber.setSelected(isSelect);  
	    }  
	  
	    private void setMine(boolean isSelect) {  
	    	btn_container_setting.setSelected(isSelect);  
	    	btn_setting.setSelected(isSelect);  
	    }  
	  
	    /**
		 * button点击事件
		 * 
		 * @param view
		 */
		public void onTabClicked(View view) {
			switch (view.getId()) {
			case R.id.btn_conversation: {
				mainPager.setCurrentItem(0);
				updataBottomStatu(0);
			}
				break;
			case R.id.btn_address_list: {
				mainPager.setCurrentItem(1);
				updataBottomStatu(1);
			}
				break;
			case R.id.btn_find_list: {
				mainPager.setCurrentItem(2);
				updataBottomStatu(2);
			}
				break;
			case R.id.btn_setting: {
				mainPager.setCurrentItem(3);
				updataBottomStatu(3);
			}
				break;

			}
		}
	
	

}