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：

<?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布局文件：

@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</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    @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

ActionBar

底部导航页：

更多相关文章

随机推荐