android---仿微信主界面設計

時間  2019-11-30
標籤 android 微信 界面 設計 欄目 Android 简体版
原文   原文鏈接 
整體是按照郭神的文章來設計的,連接在下面.本次記錄主要是回顧過程,加深設計理解

http://blog.csdn.net/gebitan505/article/details/36674397
先來一張效果圖
這裏寫圖片描述java

首先用到的知識有ActionBar的自定義,開源項目PagerSlidingTabStrip,android.support.v4.view.ViewPager這三大部件.android

一.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,下面舉一個例子markdown

<?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中代碼配置了app

/** * 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];
    }
}

這一系列下來微信頁面也就作好了,這一個模版相信能夠適配出好多應用程序了.ide

備註:等待更新

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。佈局

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程