android---仿微信主界面设计

总体是按照郭神的文章来设计的,链接在下面.本次记录主要是回顾过程,加深设计理解

http://blog.csdn.net/gebitan505/article/details/36674397
先来一张效果图

首先用到的知识有ActionBar的自定义,开源项目PagerSlidingTabStrip,android.support.v4.view.ViewPager这三大部件.

一.ActionBar的设计

首先是main.xml,先定义这些菜单,界面稍后在调整

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

    <item
        android:id="@+id/action_search"
        android:actionViewClass="android.widget.SearchView"
        android:icon="@drawable/actionbar_search_icon"
        android:showAsAction="always|collapseActionView"
        android:title="@string/action_search"
        />
    <item
        android:id="@+id/action_add"
        android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"
        android:icon="@drawable/actionbar_add_icon"
        android:showAsAction="always"
        android:title="@string/action_add"
        />
    <!--在这里设置菜单.然后自定义一个menu -->
    <item
        android:id="@+id/action_btn01"
        android:icon="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
        android:orderInCategory="2"
        android:title="更多"
        android:showAsAction="always">
    <menu>
    <item
         android:id="@+id/action_photo"
        android:icon="@drawable/ofm_photo_icon"
        android:title="@string/action_photo"
        android:showAsAction="never"
        />
    <item
        android:id="@+id/action_connection"
        android:icon="@drawable/ofm_collect_icon"
        android:title="@string/action_connection"
        android:showAsAction="never"
        />
    <item
        android:id="@+id/action_card"
        android:icon="@drawable/ofm_card_icon"
        android:title="@string/action_card"
        android:showAsAction="never"
        />
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ofm_setting_icon"
        android:title="@string/action_settings"
        android:showAsAction="never"
         />
    <item
        android:id="@+id/action_feed"
        android:icon="@drawable/ofm_feedback_icon"
        android:title="@string/action_feed"
        android:showAsAction="never"
        />
    </menu>
</item>
</menu>

1.android:actionViewClass="android.widget.SearchView"调用系统的搜索栏样式,
2.android:showAsAction="always|collapseActionView"使其可以铺满整个ActionBar.这样就能模仿出微信的效果了
3.再者overflow里面的带图标+title效果,需要自定义一个item包裹一个单独的menu,这样的话就不需要用代码就能实现图标+title的效果
4.android:actionProviderClass="develop.niuli.com.weixin.PlusActionProvider"这个使用的ActionProvider,也就相当于自定义另一个菜单实现加号功能,而PlusActionProvider是自己单独写的一个类

/**
 *主要用于模仿微信上+号实现的菜单
 * Created by nl101 on 2015/9/3.
 */
public class PlusActionProvider extends ActionProvider {

    private Context context;
    public PlusActionProvider(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    public View onCreateActionView() {
        return null;
    }

    @Override
    public void onPrepareSubMenu(SubMenu subMenu) {
        //移除已经存在的项
        subMenu.clear();
        //为菜单添加图片和文字,并且加入监听事件
        subMenu.add(context.getString(R.string.plus_group_chat))
                .setIcon(R.drawable.ofm_group_chat_icon)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return false;
                    }
                });
        //剩下的如法炮制就好了
        subMenu.add(context.getString(R.string.plus_add_friend))
                .setIcon(R.drawable.ofm_add_icon)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return false;
                    }
                });
        subMenu.add(context.getString(R.string.plus_video_chat))
                .setIcon(R.drawable.ofm_video_icon)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return false;
                    }
                });
        subMenu.add(context.getString(R.string.plus_scan))
                .setIcon(R.drawable.ofm_qrcode_icon)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return false;
                    }
                });
        subMenu.add(context.getString(R.string.plus_take_photo))
                .setIcon(R.drawable.ofm_camera_icon)
                .setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return false;
                    }
                });
    }

    @Override
    public boolean hasSubMenu() {
        return true;
    }
}

这样的ActionBar基本实现了我们想要的功能,剩下的就差样式之类,所以修改Style.xml文件,AS里面也自带主题编辑器,暂时还没用到过,后期尝试

<resources>

    <!-- 这里可以使用官方的编译器来设置,具体还要再次学习-->
    <style name="App_Theme" parent="@android:style/Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/wexinActionBar</item>
        <item name="android:itemBackground">@drawable/actionbar_bg_selector</item>
        <item name="android:actionBarItemBackground">@drawable/actionbar_bg_selector</item>
        <item name="android:itemTextAppearance">@style/WeChatActionBarTitleText</item>
        <item name="android:actionOverflowButtonStyle">@style/WeChatActionButtonOverflow</item>
    </style>

    <style name="wexinActionBar" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">#303537</item>
        <item name="android:titleTextStyle">@style/WeChatActionBarTitleText</item>
    </style>
    <style name="WeChatActionBarTitleText" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#cfcfcf</item>
        <item name="android:textSize">17sp</item>
    </style>

    <style name="WeChatActionButtonOverflow" parent="android:style/Widget.Holo.ActionButton.Overflow">
        <item name="android:src">@drawable/actionbar_more_icon</item>
    </style>
</resources>

二.主界面的设计

使用PagerSlidingTabStrip+viewpager,两者会自动适配,用起来很方便.
在main_activity.xml中配置

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <!--引入的类似ActionBar的一个tabs开源项目 -->
    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        app:pstsShouldExpand="true"
        android:layout_height="40dp"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/pagers"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tabs"
        />
</RelativeLayout>

然后建立三个fragment布局,放入到viewpager,下面举一个例子

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="聊天界面"
        android:gravity="center"
        android:textSize="20sp"
        />

</FrameLayout>

/**
 * Created by nl101 on 2015/9/4.
 */
public class ChatFragment extends android.support.v4.app.Fragment {


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.chatfragment_layout,container,false);
        return view;
    }
}

接下来就是在MainActivity.java中代码配置了

/**
     * tabs栏的实例
     */
    private PagerSlidingTabStrip tabs;

    /**
     * 获取当前屏幕的密度
     */
    private DisplayMetrics dm;

    /**
     * 主界面的viewpager
     */
    private ViewPager pagers;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setOverflowShowingAlways();
        dm = getResources().getDisplayMetrics();
        pagers = (ViewPager) findViewById(R.id.pagers);
        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        //这个类要继承FragmentActivity才可以有这个方法
        pagers.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
        tabs.setViewPager(pagers);
        setTabValue();
    }

    /**
     * 对PagerSlidingTabStrip属性的修改
     */
    private void setTabValue(){
//        //设置tabs自动填充满整个屏幕,xml文件设置才有效果
//        tabs.setShouldExpand(true);
        //设置tabs的分割线透明
        tabs.setDividerColor(Color.TRANSPARENT);
        //设置tabs底部线的高度
        //TypedValue需要学习了解
        tabs.setUnderlineHeight((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 1, dm));
        // 设置Tab Indicator的高度
        tabs.setIndicatorHeight((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 4, dm));
        // 设置Tab标题文字的大小
        tabs.setTextSize((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 16, dm));
        // 设置Tab Indicator的颜色
        tabs.setIndicatorColor(Color.parseColor("#45c01a"));
        // 设置选中Tab文字的颜色 (这是我自定义的一个方法)
//        tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
        // 取消点击Tab时的背景色
        tabs.setTabBackground(0);
    }

可以看出来viewpager需要一个Adapter来配置其页面,而tabs需要配置viewpager,这样的话,三者就能完美的相适应.

/**
 * Created by nl101 on 2015/9/4.
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {

    /**
     * 聊天界面
     */
    private ChatFragment chatFragment;
    /**
     * 发现页面
     */
    private FoungFragment foundFragment;
    /**
     * 聊天界面
     */
    private ContactFragment contactFragment;

    private final String[] titles = { "聊天", "发现", "通讯录" };

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                if (chatFragment == null) {
                    chatFragment = new ChatFragment();
                }
                return chatFragment;
            case 1:
                if (foundFragment == null) {
                    foundFragment = new FoungFragment();
                }
                return foundFragment;
            case 2:
                if (contactFragment == null) {
                    contactFragment = new ContactFragment();
                }
                return contactFragment;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

这一系列下来微信页面也就做好了,这一个模版相信可以适配出好多应用程序了.

备注:等待更新

版权声明：本文为博主原创文章，未经博主允许不得转载。