Android案例（4）——微信6.0主界面

原文地址：微信6.0主界面



一、关于滑动时下面图标颜色的渐变Xfermodes：







一、创建工程

因为Actionbar出现在Android3.0之后，所以：



我们的图片资源：



最下面的四个：



右上角的几个：



然后在values文件夹下的string.xml中设置：

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

<string name="app_name">微信</string>
<string name="action_search">查找</string>
<string name="action_add">添加</string>
<string name="menu_group_chat">发起群聊</string>
<string name="menu_feedback">意见反馈</string>
<string name="menu_addfriend">添加朋友</string>
<string name="menu_scan">扫一扫</string>
<string name="tab_contact">通讯录</string>
<string name="tab_found">发现</string>
<string name="tab_me">我</string>

</resources>

二、制作全新的TitleBar

然后我们在menu文件夹下的main.xml中设置右上角的那五个item：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

<item
android:id="@+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/actionbar_search_icon"
android:showAsAction="ifRoom|collapseActionView"
android:title="@string/action_search"/>

<item
android:id="@+id/action_group_chat"
android:icon="@drawable/menu_group_chat_icon"
android:title="@string/menu_group_chat"/>
<item
android:id="@+id/action_add_friend"
android:icon="@drawable/menu_add_icon"
android:title="@string/menu_addfriend"/>
<item
android:id="@+id/action_scan"
android:icon="@drawable/men_scan_icon"
android:title="@string/menu_scan"/>
<item
android:id="@+id/action_feedback"
android:icon="@drawable/menu_feedback_icon"
android:title="@string/menu_feedback"/>

</menu>

注意点一：在第一个item中有android.widget.SearchView，自己去找一下详细的介绍。

注意点二：在Android项目中默认的右上角只会有一个放大镜的搜索的小按钮，并不会出现加好+的那个按钮。看下图为默认：看<application>下的theme属性：



当我们【ctrl+左键】进入AppTheme这个主题后：会进入res/values/styles.xml文件：

<resources>

<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>

</resources>

因为我们当前的模拟器是4.2.2版本的，所以我们去找res/values-v14/styles.xml：

然后我们就自定义了其中的一些东西：

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<!--
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.

-->
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">

<!-- API 14 theme customizations(自定义) can go here. -->
<item name="android:actionOverflowButtonStyle">@style/weixinActionOverflowButtonStyle</item>
</style>

<style name="weixinActionOverflowButtonStyle">
<item name="android:src">@drawable/actionbar_add_icon</item>
</style>

</resources>

当然这样还是不够滴！

我们去MainActivity中写，然后让系统强制显示：

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

/**
* 强制让系统显示右上角的加号。
* 当然这样少不了values-v14里面的设置啦
*/
private void setOverflowButtonAlways()
{
try
{
// 设置的原理是将sHasPermanentMenuKey这个MenuKey设置为false
ViewConfiguration config = ViewConfiguration.get(this);
Field menuKey = ViewConfiguration.class
.getDeclaredField("sHasPermanentMenuKey");
menuKey.setAccessible(true);
menuKey.setBoolean(config, false);
} catch (Exception e)
{
e.printStackTrace();
}
}

/**
* 设置menu显示icon
*/
@Override
public boolean onMenuOpened(int featureId, Menu menu)
{

if (featureId == Window.FEATURE_ACTION_BAR && menu != null)
{
if (menu.getClass().getSimpleName().equals("MenuBuilder"))
{
try
{
Method m = menu.getClass().getDeclaredMethod(
"setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e)
{
e.printStackTrace();
}
}
}

return super.onMenuOpened(featureId, menu);
}

然后在onCreate中调用它们：

setOverflowButtonAlways();
getActionBar().setDisplayShowHomeEnabled(false);

三、使用ViewPager实现内容区域：
注意点一：对于ViewPager，首先注意它的包，【ctrl+shift+K】去找一下ViewPager，然后去它的源码找一下包名吧。

注意点二：代码中ViewPager的height为0dp，LinearLayout的height为60dp，同时设置ViewPager的weight为1，这样就代表着整个页面高度减去0dp，减去60dp，剩下的都是内容的高度了。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:hyman="http://schemas.android.com/apk/res/com.imooc.weixin6_0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

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

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

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_one"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_start_conversation"
hyman:text="@string/app_name"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_two"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_friendslist"
hyman:text="@string/tab_contact"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_three"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_emoticons"
hyman:text="@string/tab_found"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_four"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_allfriends"
hyman:text="@string/tab_me"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />
</LinearLayout>

</LinearLayout>

注意点三：在LinearLayout中有四个小图标，它的背景background是自定义的tab_bg：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<stroke
android:width="1dp"
android:color="#eee" />

<solid android:color="#f7f7f7" />

</shape>

注意点四：下面的四个小图标每个小图标都是Fragment的，但是我们这里自定义了自己的Fragment：（选v4下的包）

package com.imooc.weixin6_0;

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;

/**
* 显示外部传来title的view，就是整个页面中间的部分，把传来的title内容显示出来。
* @author hanxiao
*
*/
public class TabFragment extends Fragment
{
private String mTitle = "Default";

public static final String TITLE = "title";

/**
*
*/
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
// getArguments这个一定是Fragment它自带的啦，对应的还有setArguments
if (getArguments() != null)
{
mTitle = getArguments().getString(TITLE);
}

TextView tv = new TextView(getActivity());
tv.setTextSize(20);
// 白色
tv.setBackgroundColor(Color.parseColor("#ffffffff"));
tv.setText(mTitle);
tv.setGravity(Gravity.CENTER);
return tv;

}
}

然后去MainActivity设置相应的代码：

public class MainActivity extends FragmentActivity implements OnClickListener,
OnPageChangeListener
{

private ViewPager mViewPager;
// 对应下面的四个小图标中间会有四个页面的显示，每个页面都是一个Fragment。
private List<Fragment> mTabs = new ArrayList<Fragment>();
private String[] mTitles = new String[]
{ "First Fragment !", "Second Fragment !", "Third Fragment !",
"Fourth Fragment !" };
private FragmentPagerAdapter mAdapter;

private List<ChangeColorIconWithText> mTabIndicators = new ArrayList<ChangeColorIconWithText>();

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setOverflowButtonAlways();
getActionBar().setDisplayShowHomeEnabled(false);

// 初始化VIew：
initView();
// 初始化数据：
initDatas();
mViewPager.setAdapter(mAdapter);
initEvent();

}

/**
* 初始化数据：
*/
private void initDatas()
{
for (String title : mTitles)
{
TabFragment tabFragment = new TabFragment();
Bundle bundle = new Bundle();
bundle.putString(TabFragment.TITLE, title);
// 与TabFragment中的代码对应上了
tabFragment.setArguments(bundle);
// 还可以这样添加：
mTabs.add(tabFragment);
}

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
{

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

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

/**
* 初始化VIew：
*/
private void initView()
{
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

}

四、自定义下面每个小框的View



1、attr.xml：

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

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

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

</resources>

上面四个attr分别代表着图标、图标颜色、文字内容、文字大小。后四个代表ChangeColorIconWithText这个类中用了这四个属性。

2、布局文件中使用：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:hyman="http://schemas.android.com/apk/res/com.imooc.weixin6_0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

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

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

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_one"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_start_conversation"
hyman:text="@string/app_name"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_two"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_friendslist"
hyman:text="@string/tab_contact"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_three"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_emoticons"
hyman:text="@string/tab_found"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />

<com.imooc.weixin6_0.ChangeColorIconWithText
android:id="@+id/id_indicator_four"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
hyman:icon="@drawable/ic_menu_allfriends"
hyman:text="@string/tab_me"
hyman:text_size="12sp"
hyman:color="#ff45c01a" />
</LinearLayout>

</LinearLayout>

注意点一：命名空间：xmlns:hyman="http://schemas.android.com/apk/res/com.imooc.weixin6_0"，后面加的是应用名称。就是把刚刚设置的attr引入到这个布局文件中，使得布局文件可以使用这里的属性。

注意点二：<com.imooc.weixin6_0.ChangeColorIconWithText>

注意点三：attr中属性的使用：

            hyman:icon="@drawable/ic_menu_start_conversation"
            hyman:text="@string/app_name"
            hyman:text_size="12sp"
            hyman:color="#ff45c01a"

3、构造方法中获取自定义属性：