扒一扒Android那些常用的布局

2017-03-01 本文已影响323人 Android开发哥

通用抽屉布局（DrawerLayout）

效果图

布局

布局文件

新建一个tool_bar.xml

之所以使用另外新建布局文件，是因为考虑到toolbar在很多Activity可能会复用。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:layout_scrollFlags="enterAlways|scroll">

</android.support.v7.widget.Toolbar>

新建一个drawer.xml

新建一个drawer.xml纯属是因为不想把太多代码写在一个布局文件里面。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="this is content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="option1"
            android:text="选项1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="option2"
            android:text="选项2" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

注意，一个DrawerLayout里面需要有两个ViewGroup，其中带有android:layout_gravity="start"的将会是左边侧滑的菜单。

activity_main.xml

由于上面两个布局都写好了，所以我们就直接包含进来就可以了。

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

    <include
        android:id="@+id/toolbar"
        layout="@layout/tool_bar" />

    <include
        android:id="@+id/drawerLayout"
        layout="@layout/drawer" />
</LinearLayout>

菜单文件

<?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">
    <item
        android:icon="@mipmap/ic_launcher"
        android:title="选项1"
        app:showAsAction="always" />
    <item android:title="选项2" />
    <item android:title="选项3" />
    <item android:title="选项4" />
    <item
        android:title="选项5"
        app:showAsAction="always" />
</menu>

app:showAsAction表示该菜单项会在toolbar上显示

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        setupDraerLayuout();
    }

    private void setupDraerLayuout() {
        toolbar.setTitle("");
        toolbar.setTitleTextColor(Color.parseColor("#ffffff"));
        setSupportActionBar(toolbar);
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                Toast.makeText(MainActivity.this, "close", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                Toast.makeText(MainActivity.this, "open", Toast.LENGTH_SHORT).show();
            }
        };
        drawerToggle.syncState();
        drawerLayout.setDrawerListener(drawerToggle);
    }


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

    public void option1(View v) {
        Intent intent = new Intent();
        intent.setClass(this, ToolbarHideActivity.class);
        startActivity(intent);
    }

    public void option2(View v) {
        Intent intent = new Intent();
        intent.setClass(this, CollaspingLayoutActivity.class);
        startActivity(intent);
    }
}

较为关键的应该就是下面的代码

        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                Toast.makeText(MainActivity.this, "close", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                Toast.makeText(MainActivity.this, "open", Toast.LENGTH_SHORT).show();
            }
        };
        drawerToggle.syncState();
        drawerLayout.setDrawerListener(drawerToggle);

由于ActionBarDrawerToggle自身实现DrawerLayout.DrawerListener接口，所以我们只需要重写他的一些接口方法，就可以直接设置为drawerLayout的监听器了。

导航抽屉布局（DrawerLayout）

效果图

布局

这种布局跟上面的布局差不多，只是左边的侧滑栏改变了。我们不使用普通的LinearLayout，而是使用NavigationView代替。这让我们的代码更加地优雅。

所以我们只需要在上面的代码作修改

activity_main_drawer.xml

左边的选项是通过菜单的形式展示的

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/option1"
            android:icon="@mipmap/ic_launcher"
            android:title="选项1" />
        <item
            android:id="@+id/option2"
            android:icon="@mipmap/ic_launcher"
            android:title="选项2" />
    </group>

    <item android:title="分组2">
        <menu>
            <item
                android:id="@+id/option3"
                android:icon="@mipmap/ic_launcher"
                android:title="选项3" />
            <item
                android:id="@+id/option4"
                android:icon="@mipmap/ic_launcher"
                android:title="选项4" />
        </menu>
    </item>


</menu>

drawer.xml

我们只需要把原来的LinearLyaout改成NavigationView就可以了。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="this is content" />
    </LinearLayout>

  
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/activity_main_drawer"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

MainActivity.java

至于代码，差不多就只有设置菜单点击事件的代码了

navigationView.setNavigationItemSelectedListener(this);

可选

因为我们的效果是带有图片的，这一步可以为左边的侧滑栏添加headerView。

header_view.xml

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/header" />

</LinearLayout>

MainActivity.java

NavigationView navigationView = (NavigationView) findViewById(R.id.nav);
        navigationView.addHeaderView(getLayoutInflater().inflate(R.layout.header_view, null, false));

上述代码就可以为NavigationView添加一个headerView了。

普通Toolbar自动隐藏布局（视差滚动视图）

效果图

布局

这是纯布局的代码，那就直接上代码了。

布局

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/text" />

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

ToolbarHideActivity.java

public class ToolbarHideActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar_hide);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("新闻");
        setSupportActionBar(toolbar);
    }
}

带图片的Toolbar自动隐藏布局（视差滚动视图）

效果图

布局

这个基本也都是纯布局的代码

activity_collapsing_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/header"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <include layout="@layout/tool_bar" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/text" />

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fac"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="6dp"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="@color/colorPrimary"
        app:layout_anchor="@id/toolbar_layout"
        app:layout_anchorGravity="bottom|center"
        app:pressedTranslationZ="16dp"
        app:rippleColor="@color/colorPrimaryDark" />


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

app:layout_scrollFlags
- scroll: 当滚动的时候开始移出屏幕
- enterAlways: 一旦向上滚动这个view就可见。
- enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
- exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
app:contentScrim: 当内容收起来的时候，显示的背景颜色。
appbar_scrolling_view_behavior: 改字符串其实是一个class的完成名字，可以直接被使用。这个Behavior的class是真正控制滚动时候View的滚动行为.我们也可以继承Behavior这个class去实现特有的滚动行为.

CollapsingLayoutActivity.java

public class CollapsingLayoutActivity extends AppCompatActivity{


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_layout);
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
    }
}

扒一扒Android那些常用的布局

通用抽屉布局（DrawerLayout）

效果图

布局文件

新建一个tool_bar.xml

新建一个drawer.xml

activity_main.xml

菜单文件

MainActivity.java

导航抽屉布局（DrawerLayout）

效果图

activity_main_drawer.xml

drawer.xml

MainActivity.java

可选

header_view.xml

MainActivity.java

普通Toolbar自动隐藏布局（视差滚动视图）

效果图

布局

ToolbarHideActivity.java

带图片的Toolbar自动隐藏布局（视差滚动视图）

效果图

activity_collapsing_layout.xml

CollapsingLayoutActivity.java

猜你喜欢

热点阅读