android 小练习（一） ---仿微信UI主界面
ActionBar
相信大家都用过微信，微信的界面我们从上往下看，首先是一个ActionBar，并且自定义了ActionProvider，就是那个“加号”，里面有五个子菜单。今天就来试着模仿微信写一个UI界面。
我们先创建一个主Activity，用于显示微信的主界面：
public class MainActivity extends Activity {
@Override
protected 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);
}
@Override
public View onCreateActionView() {
return null;
}
@Override
public boolean hasSubMenu() {
return true;
}
@Override
public void onPrepareSubMenu(SubMenu subMenu) {
subMenu.clear();//注意这个方法
subMenu.add("发起群聊").setIcon(R.drawable.item1)
.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
//添加点击事件
return true;
}
});
...//同样方法添加另外4个
}
}其中首先调用hasSubMenu() 方法返回true，表示有子菜单，然后在onPrepareSubMenu()方法中添加子菜单，这里注意subMenu.clear()这个方法，每次点击ActionProvider这个菜单都会调用一次onPrepareSubMenu()方法，如果不是clear()清除一下subMenu会导致没点击一次，就多一倍的子菜单。
完成后就可以开始创建menu的布局文件了，使用android:actionProviderClass属性加入我们刚创建的自定义AcitonProvider：
<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布局文件：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu,menu);
return super.onCreateOptionsMenu(menu);
}同时也可以添加点击事件：
@Override
public 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
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的布局文件中：
<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看代码：
<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
@Override
public 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;
@Override
protected 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() {
@Override
public 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