首页 > 代码库 > 26两种主界面的设计
26两种主界面的设计
两种均模仿了微信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;
}
}
}
26两种主界面的设计
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。