simplenews项目学习（二）

主界面项目的开发

1、因为主界面是由侧边栏fragment切换，就是用DrawerLayout+material design的NavigationMenuView来实现，在加上有标题toolbar+fraglayout的使用又引用了material design的CoordinatorLayout

a、布局文件

使用materialDesgin要引用

	compile 'com.android.support:design:25.1.0'

   main_layout的布局

?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/appbar"
        layout="@layout/toolbar"//toolbar布局
        />
    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appbar"
        android:scrollbars="none"
        android:elevation="5dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView

        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"//添加的原型头布局
        app:menu="@menu/navigation_menu"//menu菜单文件
        />
</android.support.v4.widget.DrawerLayout>
navigation_header布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/colorPrimaryDark"
    android:gravity="center"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    >
    <de.hdodenhof.circleimageview.CircleImageView//使用该控件要引用compile 'de.hdodenhof:circleimageview:1.3.0'包

        android:id="@+id/profile_image"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/protrait"
        app:border_color="@color/primary_light"
        app:border_width="2dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textSize="18sp"
        android:gravity="center"
        android:text="smile"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        />

</LinearLayout>
toobar的布局文件
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:id="@+id/appbar"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >
    <android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="5dp"
        app:layout_scrollFlags="scroll|enterAlways"
        />
</android.support.design.widget.AppBarLayout>
menu的资源文件
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".main.widget.MainActivity"
    >
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_news"
            android:icon="@mipmap/ic_assessment_white_24dp"
            android:checked="true"
            android:title="新闻"
            />
        <item
            android:id="@+id/navigation_item_images"
            android:icon="@mipmap/ic_image_white_24dp"
            android:title="图片" />
        <item
            android:id="@+id/navigation_item_weather"
            android:icon="@mipmap/ic_date_range_white_24dp"
            android:title="天气" />
        <item
            android:id="@+id/navigation_item_about"
            android:icon="@mipmap/ic_portrait_white_24dp"
            android:title="关于" />
    </group>

</menu>
	b、根据项目结构需求建立接口
	1、由需求可以知道在侧边栏有四个选择界面的事件建立点击处理事件接口mainview
	public interface MainView {
  	  void switch2News();
  	  void switch2Image();
	  void switch2Weather();
 	  void switch2About();
	}
	2、建立侧边栏与主界面的presenter来处理回调
		
public class MainPresenterImp implements MainPresenter {
    private MainView view;
    public MainPresenterImp(MainView mainView) {
        this.view=mainView;
    }
    @Override
    public void switchNevigation(int id) {
    switch (id){
        case R.id.navigation_item_news:
            view.switch2News();
            break;
        case R.id.navigation_item_images:
            view.switch2Image();
            break;
        case R.id.navigation_item_weather:
            view.switch2Weather();
            break;
        case R.id.navigation_item_about:
            view.switch2About();
            break;
    }
    }
}
	3、主界面acitivity中处理继承MainView实现功能方法
	
public class MainActivity extends AppCompatActivity implements MainView{
    private Toolbar mToolbar;
    private DrawerLayout mDrawableLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private NavigationView mNavigationView;
    private MainPresenter mainPresenter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar=(Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);//添加toolbar注意要在activity的清单文件中加入android:theme="@style/AppTheme.NoActionBar"主题

        mDrawableLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
        //设置toolbar标题打开关闭侧边栏
        mDrawerToggle=new ActionBarDrawerToggle(this,mDrawableLayout,mToolbar,R.string.drawer_open,R.string.drawer_close);
        mDrawerToggle.syncState();// 这个必须要，没有的话进去的默认是个箭头。。正常应该是三横杠的
        mDrawableLayout.setDrawerListener(mDrawerToggle);
       mNavigationView= (NavigationView)findViewById(R.id.navigation_view);
        setupDrawerContent(mNavigationView);
       mainPresenter= new MainPresenterImp(this);
        switch2News();
    }
    //设置侧边栏的点击监听
    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        mainPresenter.switchNevigation(menuItem.getItemId());
                        menuItem.setChecked(true);
                        mDrawableLayout.closeDrawers();
                        return true;
                    }
                });
    }


    @Override
    public void switch2News() {
        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new NewsFragment()).commit();
        mToolbar.setTitle("新闻");
    }

    @Override
    public void switch2Image() {
        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new ImageFragment()).commit();
        mToolbar.setTitle("图片");
    }

    @Override
    public void switch2Weather() {
        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new WeatherFragment()).commit();
        mToolbar.setTitle("天气");
    }

    @Override
    public void switch2About() {
        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new AboutFragment()).commit();
        mToolbar.setTitle("关于");
    }
}
	好了！主界面完结了，就是这么简单
主页效果图：