android 小练习（一） ---仿微信UI主界面

ActionBar

相信大家都用过微信，微信的界面我们从上往下看，首先是一个ActionBar，并且自定义了ActionProvider，就是那个“加号”，里面有五个子菜单。今天就来试着模仿微信写一个UI界面。
我们先创建一个主Activity，用于显示微信的主界面：

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_main);}
}

接下来在Manifest.xml布局文件中注册，并修改Theme属性（AcitonBar的主题）：

<application
        android:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:supportsRtl="true"android:theme="@android:style/Theme.Holo.Light"><activity android:name=".MainActivity"android:label="微信"><intent-filter><action android:name="android.intent.action.MAIN"/><category android:name="android.intent.category.LAUNCHER"/></intent-filter></activity></application>

接下来创建一个MyActionProvider继承自AcitonProvider，并重写onCreateActionView()和onPrepareSubMenu()方法：

public class MyActionProvider extends ActionProvider{public MyActionProvider(Context context) {super(context);}@Overridepublic View onCreateActionView() {return null;}@Overridepublic boolean hasSubMenu() {return true;}@Overridepublic void onPrepareSubMenu(SubMenu subMenu) {subMenu.clear();//注意这个方法subMenu.add("发起群聊").setIcon(R.drawable.item1).setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {//添加点击事件return true;}});...//同样方法添加另外4个}
}

其中首先调用hasSubMenu() 方法返回true，表示有子菜单，然后在onPrepareSubMenu()方法中添加子菜单，这里注意subMenu.clear()这个方法，每次点击ActionProvider这个菜单都会调用一次onPrepareSubMenu()方法，如果不是clear()清除一下subMenu会导致没点击一次，就多一倍的子菜单。

完成后就可以开始创建menu的布局文件了，使用android:actionProviderClass属性加入我们刚创建的自定义AcitonProvider：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><item
        android:id="@+id/search"android:icon="@drawable/search"android:showAsAction="always"android:title="search" /><item
        android:id="@+id/more"android:actionProviderClass="com.example.app.iminatewui.MyActionProvider"android:icon="@drawable/add"android:showAsAction="always"android:title="more" />
</menu>

别忘了在MainActivity中将加载menu布局文件：

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {MenuInflater inflater = getMenuInflater();inflater.inflate(R.menu.menu,menu);return super.onCreateOptionsMenu(menu);}

同时也可以添加点击事件：

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()){case R.id.search://添加点击事件return true;default:return false;}

这一步到这里就完成了，运行试一下看看：

我没有找到微信的图标素材，于是就找了一些其他图标代替，主要看下效果，如果有微信图标素材就可以直接代替，这样的话就更逼真了。
还发现一个问题，左边的这个图标微信里是没有的，怎么去掉那？也很简单，在MainAcitvity中调用getActionBar()获取到ActionBar的实例，在调用它的setDisplayShowHomeEnabled()方法就可以不显示icon和log：

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_main);ActionBar actionBar = getActionBar();actionBar.setDisplayShowHomeEnabled(false);}

这样就OK了：

还有就是细节方面，比如AcitonBar的颜色怎么改，也很简单，先自定义一个style：

<resources><style name="MyTheme" parent="@android:style/Theme.Holo.Light"><item name="android:actionBarStyle">@style/MyActionBar</item></style><style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar"><item name="android:background">/*你要的颜色或者图片*/</item></style>
</resources>

修改其中actionBarStyle属性的background属性就可以了，然后把Manifest.xml布局文件中Theme属性修改为 android:theme=”@style/MyTheme”。

底部导航页：

还是回到我们MainActivity的布局文件中：

<?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/fragment_layout"android:layout_width="wrap_content"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><RadioGroup
        android:id="@+id/rg"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButton
            android:id="@+id/main1"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/main_background"android:button="@null"android:checked="true"android:drawableTop="@drawable/main1"android:gravity="center"android:text="微信" /><RadioButton
            android:id="@+id/main2"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/main_background"android:button="@null"android:drawableTop="@drawable/main2"android:gravity="center"android:text="通讯录" /><RadioButton
            android:id="@+id/main3"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/main_background"android:button="@null"android:drawableTop="@drawable/main3"android:gravity="center"android:text="发现" /><RadioButton
            android:id="@+id/main4"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/main_background"android:button="@null"android:drawableTop="@drawable/main4"android:gravity="center"android:text="我" /></RadioGroup>
</LinearLayout>

这个布局最外面是LinerLayout并且orientation设置时veritcal（垂直），内部是一个FrameLayout用于显示Fragment和一个RadioGroup作为底部导航的按钮。
试着运行下看看效果：

还不错吧！当选中的时候背景色实惠改变了，主要是依靠：

android:background="@drawable/main_background"

这里的@drawable/main_background看代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="true" android:drawable="@color/color_checked"/><item android:state_checked="false" android:drawable="@color/color_unchecked"/>
</selector>

就是设置选中和未选中状态设置不同颜色就可以了。
同样的你也可以对字体或者图片实现同样的效果。

接着就是新建4个Fragment，只要重写onCreateView()方法加载对应的布局文件：

public class Fragment1 extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment1,container,false);return view;}
}

完成后在MainActivity中将Fragment动态地加载进去，并绑定RadioGroup的点击事件：

public class MainActivity extends Activity {private RadioGroup radioGroup;private Fragment1 fragment1;private Fragment2 fragment2;private Fragment3 fragment3;private Fragment4 fragment4;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_main);ActionBar actionBar = getActionBar();actionBar.setDisplayShowHomeEnabled(false);radioGroup = (RadioGroup) findViewById(R.id.rg);final FragmentManager fragmentManager = getFragmentManager();fragment1 = new Fragment1();fragmentManager.beginTransaction().add(R.id.fragment_layout,fragment1).commit();radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.main1:fragmentManager.beginTransaction().replace(R.id.fragment_layout, fragment1).commit();break;case R.id.main2:if (fragment2 == null) {fragment2 = new Fragment2();}fragmentManager.beginTransaction().replace(R.id.fragment_layout, fragment2).commit();break;case R.id.main3:if (fragment3 == null) {fragment3 = new Fragment3();}fragmentManager.beginTransaction().replace(R.id.fragment_layout, fragment3).commit();break;case R.id.main4:if (fragment4 == null) {fragment4 = new Fragment4();}fragmentManager.beginTransaction().replace(R.id.fragment_layout, fragment4).commit();break;}}});}

动态加载时通过FragmentManager调用beginTransaction()开启事务完成的。
试着运行一下吧~

到这里主界面的Activity基本完成了，谢谢~
下一次会继续完善这个练习，把其他的Activity也添加上！
附上的我代码：https://github.com/huburt-Hu/IminateWechatUI.git