Android之快速搭建应用框架

快速搭建App应用框架

主要控件：
ViewPage(主界面)
TextInputLayout(登录界面)
AppBarLayout+TabLayout(顶部导航)
DrawerLayout+NavigationView(侧滑菜单)

界面如下：

简约的登录风格采用TextInputLayout,button采用自定义的风格，对于主界面，采用了Viewpage+TabLayout侧滑就可以切换界面，侧滑菜单也挺方便使用，下面代码讲解如何实现

一.登录界面

我们准备两个按钮状态，一个是正常的，一个是按下时的颜色，让用户更明确的知道自己点击了按钮 ，对于EditText，选择TextInputLayout包裹，布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Activity.MainActivity"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <android.support.design.widget.TextInputLayout
        android:layout_margin="16dp"
        android:id="@+id/tl_username"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextAppearance="@style/hintAppearance"
        app:errorTextAppearance="@style/errorAppearance"
        app:boxBackgroundColor="@color/colorPrimary"
        >
        <EditText
            android:textSize="22sp"
            android:id="@+id/et_username"
            android:hint="username"
            android:maxLength="25"
            android:maxLines="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_below="@id/tl_username"
        android:id="@+id/tl_password"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="16dp"
        app:hintTextAppearance="@style/hintAppearance"
        app:errorTextAppearance="@style/errorAppearance"
        app:boxStrokeColor="@color/colorPrimary"
        app:boxBackgroundColor="@color/colorPrimary">
        <EditText
            android:textSize="22sp"
            android:inputType="textPassword"
            android:id="@+id/et_password"
            android:hint="password"
            android:maxLength="25"
            android:maxLines="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>
    <Button
        android:onClick="loginClick"
        android:id="@+id/btn_login"
        android:layout_below="@id/tl_password"
        android:text="Login Now"
        android:textSize="18sp"
        android:background="@drawable/my_button"
        android:layout_margin="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

drawable/my_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button_press"/>
    <item android:state_pressed="false" android:drawable="@drawable/mybutton"/>
</selector>

drawable/button_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="300dp"
        android:height="60dp"/>
<corners android:radius="30dp"/>
    <gradient
        android:angle="45"
        android:startColor="@color/mytoolbar"
        android:endColor="@color/mytoolbar"/>
    <solid android:color="@color/grey"/>
</shape>

drawable/mybutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:width="300dp"
        android:height="60dp"/>
    <corners android:radius="30dp"/>
    <gradient
        android:angle="45"
        android:startColor="@color/colorAccent"
        android:endColor="@color/colorAccent"/>
    <solid android:color="@color/mytoolbar"/>
</shape>

res/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#000000</color>
    <color name="colorAccent">#000000</color>
    <color name="mytoolbar">#FFC6BBBF</color>
    <color name="red">#FFff0000</color>
    <color name="grey">#FF979395</color>
</resources>

res/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 需要设置为NoActionBar. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/red</item>
    </style>
    <style name="hintAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/colorAccent</item>
    </style>
</resources>

登录界面主要就是设置TextInputLayout的一些属性，比如错误时的字体颜色，水平线的颜色，浮动字体颜色，以及button的设置，下面是简单的登录代码

import android.content.Intent;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import com.example.yang.toolbar.R;


public class MainActivity extends AppCompatActivity {
    private TextInputLayout tl_username,tl_password;
    private EditText et_username,et_password;

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


    }

    private void InitView() {
        tl_username=findViewById(R.id.tl_username);
        tl_password=findViewById(R.id.tl_password);
        et_username=findViewById(R.id.et_username);
        et_password=findViewById(R.id.et_password);
    }


    private boolean vaildate(String string){
        return string.length()>=4;
   }

    public void loginClick(View view) {
        String username=et_username.getText().toString();
        String password=et_password.getText().toString();
        if(!vaildate(username)){
            tl_username.setErrorEnabled(true);
             //设置错误提示
            tl_username.setError("please input correct username");

        }
        else if(!vaildate(password)){
            tl_password.setErrorEnabled(true);
            //设置错误提示
            tl_password.setError("please input correct password");
        }else if(username.equals("Yang")&&password.equals("123456")){
            Intent intent=new Intent();
            intent.setClass(MainActivity.this, TabLayoutActivity.class);
            startActivity(intent);
        }
    }
}

主界面

从上至下，分别是ToolBar,TabLayout,ViewPage,布局代码也很简单，应为还有侧滑菜单，所以整体布局，采用Drawerlayout,代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".Activity.TabLayoutActivity">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.AppBarLayout
           android:id="@+id/appbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:theme="@style/ThemeOverlay.AppCompat.Light">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/grey">
        </android.support.v7.widget.Toolbar>
        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/colorAccent"
            android:background="@color/grey"
            app:tabMode="scrollable"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/viewpager"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/main_navigationview"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>

布局代码不是很复杂，采用AppBarLayout将ToolBar和TabLayout包裹起来，再和ViewPager放在整个LinearLayout，最后放入NavigationView.

界面代码如下

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.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.MenuItem;
import android.widget.Toast;
import com.example.yang.toolbar.Adapter.FragmentAdapter;
import com.example.yang.toolbar.Fragment.ListFragment;
import com.example.yang.toolbar.R;
import java.util.ArrayList;
import java.util.List;

public class TabLayoutActivity extends AppCompatActivity {
private ViewPager viewPager;//设置主界面的侧滑菜单
private TabLayout tabLayout;//设置顶部的tab
private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        Toolbar toolbar=findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        final ActionBar ab=getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.menu);
        ab.setDisplayHomeAsUpEnabled(true);
        drawerLayout=findViewById(R.id.main_drawerlayout);
        NavigationView navigationView=findViewById(R.id.main_navigationview);
        if(navigationView!=null){
            navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem menuItem) {
                    menuItem.setChecked(true);
                    String title=menuItem.getTitle().toString();
                    Toast.makeText(getApplicationContext(),title ,Toast.LENGTH_SHORT).show();
                    drawerLayout.closeDrawers();
                    return true;
                }
            });
        }
        viewPager=findViewById(R.id.viewpager);

        InitVierPager();

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //导航栏必须要设置，否则点击按钮NavigationView不会出现
       switch (item.getItemId()){
           case android.R.id.home:
               drawerLayout.openDrawer(Gravity.START);
               break;

       }
        return true;
    }

    private void InitVierPager() {
        tabLayout=findViewById(R.id.tab);
        List<String> titles=new ArrayList<>();
        titles.add("精选");
        titles.add("体育");
        titles.add("巴萨");
        titles.add("购物");
        titles.add("明星");
        titles.add("视频");
        titles.add("健康");
        titles.add("励志");
        titles.add("图文");
        titles.add("本地");
        titles.add("动漫");
        titles.add("搞笑");
       for(int i=0;i<titles.size();i++){
           tabLayout.addTab(tabLayout.newTab().setText(titles.get(i)));//添加tab
       }
       List<Fragment> fragments=new ArrayList<>();
       for(int i=0;i<titles.size();i++){
        fragments.add(new ListFragment());//添加fragment,这里主要是给viewpager使用,当我们侧滑界面时，fragments会自动切换
       }
        FragmentAdapter fragmentAdapter=new FragmentAdapter(getSupportFragmentManager(),fragments ,titles);
       //adapter是设置给viewpage的
       viewPager.setAdapter(fragmentAdapter);
       tabLayout.setupWithViewPager(viewPager);
       //将tablayout和Viewpager关联起来


        //使用的主要步骤：第一步：布局文件中需要AppBarLayout,这个是设置顶部的，还可以添加一个toolbar和TabLayout
        //TabLayout就是设置那些顶部的titles，主界面用viewpager,然后将ViewPager和TabLayout关联起来，这样每次
        //我们切换titles时，viewpager也会切换，切换viewPager时titles也会切换




    }
}

两个适配器，一个是ViewPager的，另一个是每个fragment的。
FragmentAdapter

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.List;

/**
 * createtime:2019/9/17
 * author:Yang
 * describe:
 */
public class FragmentAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> fragments;
    private List<String> titles;
    public FragmentAdapter(FragmentManager fm,List<Fragment> fragments,List<String> titles) {
        super(fm);
        this.fragments=fragments;
        this.titles=titles;
    }

    @Override
    public Fragment getItem(int i) {
        return fragments.get(i);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
    public CharSequence getPageTitle(int position){
        return titles.get(position);
    }
}

RecyclerViewAdapter

import android.content.Context;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.example.yang.toolbar.R;

/**
 * createtime:2019/9/17
 * author:Yang
 * describe:
 */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private Context context;
public RecyclerViewAdapter(Context context){
    this.context=context;
}



    @Override
    public RecyclerViewAdapter.ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i) {
        View view=LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item_card_main,viewGroup,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder( ViewHolder viewHolder, int i) {
           final  View view=viewHolder.mview;
           view.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   Toast.makeText(context,"孤傲冷艳美杜莎" , Toast.LENGTH_SHORT).show();
               }
           });
    }



    @Override
    public int getItemCount() {
        return 10;
    }
    public static class ViewHolder extends RecyclerView.ViewHolder{
        public final View mview;
        public ViewHolder(View itemView) {
            super(itemView);
            this.mview=itemView;
        }
    }
}

RecyclerViewAdapter是决定每一个Fragment中的内容，他的布局代码如下
layout/list_item_card_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp">
    <ImageView
        android:src="@drawable/mei"
        android:layout_width="150dp"
        android:layout_height="60dp" />
    <TextView
        android:text="气质冷艳绝美，倾国倾城，高冷又不失骄傲，温柔又不失坚强，有着难以想象的执着，拥有君临天下的能力。"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
</LinearLayout>

ListFragment是对应每一个Tab产生的一个界面，他的布局只有一个RecyclerView
layout/list_fragment

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_marginTop="10dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="60dp">
</android.support.v7.widget.RecyclerView>

ListFragment代码

import com.example.yang.toolbar.Adapter.RecyclerViewAdapter;
import com.example.yang.toolbar.R;

/**
 * createtime:2019/9/17
 * author:Yang
 * describe:
 */
public class ListFragment extends Fragment {
    //该Fragment是用来填充ViewPager的，该界面只有一个RecyclerView,但是具体显示什么内容还是需要Adapter来进行设置
private RecyclerView recyclerView;
    @Override
    public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       recyclerView= (RecyclerView) inflater.inflate(R.layout.list_fragment,container,false );
       return recyclerView;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //设置recyclerview的适配器以及布局管理器，我认为这里需要根据不同的title加载不同的布局
        recyclerView.setLayoutManager(new LinearLayoutManager(recyclerView.getContext()));
        recyclerView.setAdapter(new RecyclerViewAdapter(getActivity()));
    }
}

通过上面的工作，我们的主界面就完成了，下面设置侧滑菜单

侧滑菜单

侧滑菜单布局主要是 下面两个文件

app:headerLayout="@layout/navigation_header"
  app:menu="@menu/drawer_menu"

一个是顶部的header布局，另外一个是菜单
代码如下：
layout/navigation_header

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:background="@color/grey"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:layout_width="match_parent"
    android:layout_height="150dp">
<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:layout_marginLeft="50dp"
    android:background="@drawable/xiao"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:text="萧炎"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>

menu/drawer_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
        <item android:id="@+id/nav_home"
           android:icon="@drawable/first"
            android:title="首页"/>
        <item android:id="@+id/nav_message"
            android:icon="@drawable/message"
            android:title="信息"/>
        <item android:id="@+id/nav_music"
            android:icon="@drawable/music"
            android:title="音乐"/>
        <item android:id="@+id/nav_thing"
            android:icon="@drawable/thing"
            android:title="事项"/>
    </group>
    <item android:title="其他">
        <menu>
            <item android:title="设置"
                android:icon="@drawable/set"/>
            <item
                android:title="关于"
                android:icon="@drawable/about"/>
        </menu>
    </item>

</menu>

这样，每当我们点击导航按钮，菜单就会从侧面滑出来，主界面也可以进一步的自定义，根据不同的tab显示不同的Fragment而不是显示同一个fragment，我们就已经搭建好了app的框架