安卓開發筆記——打造屬於本身的博客園APP（一）

　　最近事情比較多，博客更新又落下了，平時有個習慣，喜歡睡前看看博客園裏博友的文章，但一直感受APP市場上下載下來的博客園客戶端用起來並非很舒服，近來發現博客園也有對外開放的數據接口，因此打算本身寫個博客園的客戶端。

　　近來谷歌推出了一套全新的UI設計規範——Material Design，不清楚的朋友看看《Material design非官方中文指導手冊》，相比以前谷歌在Android Holo風格上平平淡淡的表現不一樣，Material Design如今是被Google所比較重視的。在推出這門全新設計語言後，谷歌上自家的應用很快就使用Material Design全新設計了，如Play商店，Google Map，Google+等等。

　　打算趕一下潮流，緊跟谷歌的步伐遵循Material Design設計規範開發這個APP，也恰好讓本身熟悉下Android5.0後的新特性。這個APP會慢慢作下來，逐步完善所需功能，我也不肯定會寫幾篇文章，反正有空閒的時候就拿出來寫寫吧。

　　初步打算實現用戶的登錄，分類查看文章內容，新聞內容，包括用戶信息的瀏覽，關注，偏好文章的收藏以及離線閱讀功能，你們若是有什麼好的建議，能夠在文章評論給我留言，虛心請教。

 

好了，言歸正傳，先來看下今天要實現的效果：（UI主框架的搭建）

若是在過去，咱們要實現上圖的效果，頂部菜單咱們會使用ActionBar，側滑菜單咱們會使用SlidingMenu，ViewPager滑動頁面指示器咱們會使用ViewPagerIndicator或者PagerSlidingTabStrip等開源控件。但如今谷歌官方已經給咱們提供了實現，咱們固然就用官方提供的控件了。

側滑菜單的實現：DrawerLayout　　ViewPager滑動頁面指示器的實現：TabLayout　　這2個空間分別是在V4包和V7包中，不熟悉的朋友，網上本身查查資料吧。

 

關於代碼實現：

頂部爲ToolBar，側滑菜單爲DrawerLayout，側滑菜單內容爲NavigationView，主界面爲ViewPager內嵌Fragment，直接看代碼吧。

 

首先咱們須要對風格進行定義，咱們的頂部再也不實現ActionBar，而是谷歌新推出的基於ActionBar實現的ToolBar（在V7支持包下）：

 1 <resources>
 2     <!-- Base application theme. -->
 3     <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
 4         <!-- Toolbar（actionbar）顏色 -->
 5         <item name="colorPrimary">@color/md_green_600</item>
 6         <!-- 狀態欄顏色 -->
 7         <item name="colorPrimaryDark">@color/md_green_800</item>
 8         <!-- 窗口的背景顏色 -->
 9         <item name="android:windowBackground">@android:color/white</item>
10         <!-- SearchView -->
11         <item name="searchViewStyle">@style/MySearchViewStyle</item>
12     </style>
13 
14     <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView" />
15 
16     <style name="AppTheme" parent="@style/AppBaseTheme" />
17 </resources>

而後關於底部的NavigationBar，咱們須要額外的在values-v21文件內添加：

1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
2 
3     <style name="AppTheme" parent="@style/AppBaseTheme">
4         <!-- 底部導航欄顏色 -->
5         <item name="android:navigationBarColor">@color/md_green_600</item>
6     </style>
7 
8 </resources>

 

再來看下佈局文件：

主佈局文件:activity_main.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     android:orientation="vertical">
 5     <!--ToolBar-->
 6     <include layout="@layout/activity_toolbar" />
 7     <!--DrawerLayout-->
 8     <android.support.v4.widget.DrawerLayout
 9         android:id="@+id/dl_drawer"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent">
12         <!--Main Content-->
13         <include layout="@layout/activity_main_content" />
14         <!--Main Menu-->
15         <include layout="@layout/activity_main_menu" />
16     </android.support.v4.widget.DrawerLayout>
17 
18 </LinearLayout>

ToolBar佈局文件：activity_toolbar.xml

1 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:app="http://schemas.android.com/apk/res-auto"
3     android:id="@+id/activity_toolbar"
4     android:layout_width="match_parent"
5     android:layout_height="?attr/actionBarSize"
6     android:background="@color/md_green_600"
7     android:theme="@style/ThemeOverlay.AppCompat.Dark"
8     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

側滑菜單佈局文件：activity_main_menu.xml,activity_main_menu_header.xml

 1 <android.support.design.widget.NavigationView
 2     xmlns:android = "http://schemas.android.com/apk/res/android"
 3     xmlns:app = "http://schemas.android.com/apk/res-auto"
 4     android:id = "@+id/nv_main_menu"
 5     android:layout_height = "match_parent"
 6     android:layout_width = "wrap_content"
 7     android:layout_gravity = "start"
 8     android:clickable="true"
 9     app:headerLayout = "@layout/activity_main_menu_header"
10     app:menu = "@menu/menu_drawer_view"/>　　

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:app="http://schemas.android.com/apk/res-auto"
 3     android:layout_width="match_parent"
 4     android:layout_height="200dp"
 5     android:background="@drawable/menu_header_bg"
 6     android:orientation="vertical"
 7     android:theme = "@style/ThemeOverlay.AppCompat.Dark"
 8     android:padding="30dp">
 9 
10 
11     <com.makeramen.roundedimageview.RoundedImageView
12         android:id="@+id/imageView1"
13         android:layout_width="100dp"
14         android:layout_height="100dp"
15         android:src="@mipmap/avatar_default"
16         app:riv_border_color="#00ffffff"
17         app:riv_border_width="2dip"
18         app:riv_corner_radius="30dip"
19         app:riv_mutate_background="true"
20         app:riv_oval="true"
21         app:riv_tile_mode="repeat" />
22 
23     <TextView
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26         android:layout_marginTop="16dp"
27         android:layout_marginLeft="16dp"
28         android:layout_marginStart="16dp"
29         android:text="未登陸用戶"
30         android:textAppearance="@style/TextAppearance.AppCompat.Body2"/>
31 
32 </LinearLayout>

菜單內容文件:menu_drawer_view.xml（menu文件夾下)

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 3 
 4     <group android:checkableBehavior="single">
 5         <item
 6             android:id="@+id/nav_home"
 7             android:icon="@mipmap/ic_home_black_48dp"
 8             android:title="主頁" />
 9         <item
10             android:id="@+id/nav_sort"
11             android:icon="@mipmap/ic_assignment_black_48dp"
12             android:title="分類" />
13         <item
14             android:id="@+id/nav_rss"
15             android:icon="@mipmap/ic_favorite_black_48dp"
16             android:title="訂閱" />
17         <item
18             android:id="@+id/nav_like"
19             android:icon="@mipmap/ic_grade_black_48dp"
20             android:title="收藏" />
21     </group>
22 
23     <item android:title="其餘">
24         <menu>
25             <item
26                 android:id="@+id/nav_setting"
27                 android:icon="@mipmap/ic_settings_black_48dp"
28                 android:title="設置"></item>
29             <item
30                 android:id="@+id/nav_help"
31                 android:icon="@mipmap/ic_help_black_48dp"
32                 android:title="幫助"></item>
33         </menu>
34     </item>
35 
36 </menu>

主內容佈局文件:activity_main_content.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_main_tabs"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/md_green_600"
        app:elevation="5dp"
        app:tabIndicatorColor="@color/md_green_800"
        app:tabSelectedTextColor="@color/md_white_1000"
        app:tabTextColor="@color/md_green_100" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

 

再來看下JAVA代碼：

主Activity：

package com.lcw.rabbit.myblog;

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import com.lcw.rabbit.myblog.adapter.ViewPagerAdapter;
import com.lcw.rabbit.myblog.fragment.BestFragment;
import com.lcw.rabbit.myblog.fragment.CandidateFragment;
import com.lcw.rabbit.myblog.fragment.HomeFragment;
import com.lcw.rabbit.myblog.fragment.RecommendFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private ActionBarDrawerToggle mActionBarDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    /**
     * 初始化佈局
     */
    private void initView() {
        //實例化控件
        mToolbar = (Toolbar) findViewById(R.id.activity_toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_drawer);
        mTabLayout = (TabLayout) findViewById(R.id.tl_main_tabs);
        mNavigationView = (NavigationView) findViewById(R.id.nv_main_menu);
        mViewPager = (ViewPager) findViewById(R.id.vp_main_content);
        //設置對應屬性
        initToolBar();
        initMainContent();
        initAction();


    }

    /**
     * 初始化控件的動做監聽
     */
    private void initAction() {
        //設置側滑菜單點擊監聽
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id) {
                    //返回首頁
                    case R.id.nav_home:
                        mViewPager.setCurrentItem(0);
                        break;
                }
                mDrawerLayout.closeDrawers();
                return false;
            }
        });
    }

    /**
     * 初始化TabLayout和ViewPager
     */
    private void initMainContent() {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        Fragment homeFragment = new HomeFragment();
        Fragment bestFragment = new BestFragment();
        Fragment candidateFragment = new CandidateFragment();
        Fragment recommendFragment = new RecommendFragment();
        adapter.addFragment(homeFragment, "首頁");
        adapter.addFragment(bestFragment, "精華");
        adapter.addFragment(candidateFragment, "候選");
        adapter.addFragment(recommendFragment, "推薦");
        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    /**
     * 初始化ToolBar
     */
    private void initToolBar() {
        mToolbar.setTitle("博客園");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close);
        mActionBarDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

主滑動頁面ViewPager適配器：

 1 package com.lcw.rabbit.myblog.adapter;
 2 
 3 import android.support.v4.app.Fragment;
 4 import android.support.v4.app.FragmentManager;
 5 import android.support.v4.app.FragmentPagerAdapter;
 6 
 7 import java.util.ArrayList;
 8 import java.util.List;
 9 
10 /**
11  * 主頁面VierPager適配器
12  * Created by Lichenwei
13  * Date: 2015-08-16
14  * Time: 13:47
15  */
16 public class ViewPagerAdapter extends FragmentPagerAdapter {
17 
18     private List<Fragment> mFragments;
19     private List<String> mTitles;
20 
21     public ViewPagerAdapter(FragmentManager fm) {
22         super(fm);
23         mFragments = new ArrayList<Fragment>();
24         mTitles = new ArrayList<String>();
25     }
26 
27     /**
28      * 新添Fragment內容和標題
29      * @param fragment
30      * @param title
31      */
32     public void addFragment(Fragment fragment, String title) {
33         mFragments.add(fragment);
34         mTitles.add(title);
35     }
36 
37     @Override
38     public Fragment getItem(int position) {
39         return mFragments.get(position);
40     }
41 
42     @Override
43     public int getCount() {
44         return mFragments.size();
45     }
46 
47     @Override
48     public CharSequence getPageTitle(int position) {
49         return mTitles.get(position);
50     }
51 }

至於ViewPager所承載的Fragment這裏就不貼出來了，很簡單的顯示一個TextView。 

今天先寫到這裏，改天繼續更新，有什麼建議或疑問，能夠在文章評論給我留言。

 

接下篇：《安卓開發筆記——打造屬於本身的博客園APP（二）》

 

做者：李晨瑋
出處：http://www.cnblogs.com/lichenwei/本文版權歸做者和博客園共有,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文連接。正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，往後必有一番做爲！旁邊有「推薦」二字，你就順手把它點了吧，相得準，我分文不收；相不許，你也好回來找我！