android 底边框_Android底表

android 底边框

In this tutorial we’ll discuss and implement android Bottom Sheet widget that was introduced with Android Support v23.2.

在本教程中，我们将讨论和实现随Android支持v23.2一起引入的android底表小部件。

Android底表 (Android Bottom Sheet)

According to google material design documentation;

根据Google材料设计文档；

A bottom sheet is a sheet that slides up from the bottom edge of the screen. Bottom sheets are displayed as a result of user triggered action, and also it can reveal additional content by swiping up.

底页是从屏幕底部边缘向上滑动的页。 用户触发操作后，将显示底页，也可以通过向上滑动来显示其他内容。

Bottom sheet can be either modal – that slides up from bottom of the screen to reveal more content or persistent – when they’re integrated with the app to display supporting content.

底页可以是模式的 （从屏幕底部向上滑动以显示更多内容），也可以是持久的 （与应用程序集成以显示支持内容时）。

BottomSheets can be implemented as BottomSheetBehavior, BottomSheetDialog and BottomSheetDialogFragment.

BottomSheets可以实现为BottomSheetBehavior ， BottomSheetDialog和BottomSheetDialogFragment 。

Android BottomSheet行为 (Android BottomSheetBehavior)

BottomSheetBehavior is a type of layout_behavior used for persistent bottom sheets. It requires setting CoordinatorLayout as the root element of that layout and adding the xml attribute app:layout_behavior:android.support.design.widget.BottomSheetBehavior to the child view.

BottomSheetBehavior是用于持久性底部工作表的layout_behavior类型。 它需要将CoordinatorLayout设置为该布局的根元素，并将xml属性app:layout_behavior:android.support.design.widget.BottomSheetBehavior到子视图。

Let’s look at a sample xml child view that’ll be put inside the CoordinatorLayout.

让我们看一下将放置在CoordinatorLayout中的示例xml子视图。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:behavior_hideable="false"
        app:behavior_peekHeight="120dp"
        android:orientation="vertical"
        app:layout_behavior="@string/bottom_sheet_behavior">


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

    </LinearLayout>

Few inferences drawn from the above code snippet are:

从以上代码片段中得出的结论很少：

1. layout_behavior sets the view as bottom sheet
   layout_behavior将视图设置为底页
2. behavior_peekHeight sets the visible part of the sheet
   behavior_peekHeight设置工作表的可见部分
3. behavior_hideable sets whether the view can be hidden by dragging it further downwards. It accepts boolean values.
   behavior_hideable设置是否可以通过向下拖动来隐藏视图。 它接受布尔值。

Let’s create a new Project in Android Studio, set the template to Basic Activity and add the above the xml snippet in the activity_main.xml.

让我们创建Android Studio中一个新的项目，将模板，基本活动，并添加中的XML片段以上activity_main.xml 。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.journaldev.bottomsheet.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:behavior_hideable="false"
        app:behavior_peekHeight="120dp"
        android:orientation="vertical"
        app:layout_behavior="@string/bottom_sheet_behavior">


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

    </LinearLayout>


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

Let’s run our application once and see how it behaves.

让我们运行一次应用程序，看看它的行为。

Set app:behavior_hideable=”true” and the bottom sheet would stay hidden once dragged down.

设置app：behavior_hideable =“ true” ，一旦向下拖动，底部工作表将保持隐藏状态。

The BottomSheetBehavior class allows us to set the present state of the view programmatically. Following are the important constants used to handle the state:

BottomSheetBehavior类允许我们以编程方式设置视图的当前状态。 以下是用于处理状态的重要常量：

1. STATE_COLLAPSED : Sets the bottom sheet height with the value set on the peekHeight attribute.
   STATE_COLLAPSED ：使用在peekHeight属性上设置的值来设置底部工作表的高度。
2. STATE_DRAGGING : The bottom sheet is being dragged
   STATE_DRAGGING ：底部工作表正在拖动
3. STATE_EXPANDED : The bottom sheet is completely expanded
   STATE_EXPANDED ：底部工作表已完全展开
4. STATE_HIDDEN : The bottom sheet is completely hidden from the screen
   STATE_HIDDEN ：底部工作表从屏幕上完全隐藏

Let’s jump onto the business end of this tutorial. We’ll develop an application that displays a RecyclerView inside the bottom sheet with items to select.

让我们跳到本教程的业务端。 我们将开发一个应用程序，该应用程序在底部的工作表中显示一个RecyclerView以及可供选择的项目。

Android底表示例项目结构 (Android Bottom Sheet Example Project Structure)

Android底表示例代码 (Android Bottom Sheet Example Code)

The activity_main.xml layout is defined below.

下面定义了activity_main.xml布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/coordinatorLayout"
    tools:context="com.journaldev.bottomsheet.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        android:id="@+id/bottom_sheet"
        android:background="@android:color/white"
        app:layout_behavior="@string/bottom_sheet_behavior">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:textStyle="bold"
            android:text="SELECT AN ITEM"/>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:layout_marginTop="16dp" />

    </LinearLayout>


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

MainActivity.java is given below.

MainActivity.java在下面给出。

package com.journaldev.bottomsheet;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements ItemAdapter.ItemListener {


    BottomSheetBehavior behavior;
    RecyclerView recyclerView;
    private ItemAdapter mAdapter;
    CoordinatorLayout coordinatorLayout;

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

        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);


        View bottomSheet = findViewById(R.id.bottom_sheet);
        behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                // React to state change
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                // React to dragging events
            }
        });

        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        ArrayList items = new ArrayList();
        items.add("Item 1");
        items.add("Item 2");
        items.add("Item 3");
        items.add("Item 4");
        items.add("Item 5");
        items.add("Item 6");

        mAdapter = new ItemAdapter(items, this);
        recyclerView.setAdapter(mAdapter);

        Button button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

    }

    @Override
    public void onItemClick(String item) {

        Snackbar.make(coordinatorLayout,item + " is selected", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();

        behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

    }
}

Following are the inferences drawn from the above code.

以下是从以上代码得出的推论。

behavior = BottomSheetBehavior.from(bottomSheet);
The from(View view) is a static method of the BottomSheetBehavior class and is used to take the instance of the behavior from the layout params of the View instance.

behavior = BottomSheetBehavior.from(bottomSheet);
from(View view)是BottomSheetBehavior类的静态方法，用于从View实例的布局参数中获取行为的实例。

BottomSheetCallback is called upon the BottomSheetBehavior instance for us to receive callbacks like state changes and offset changes for our bottom sheet.

BottomSheetCallback须待BottomSheetBehavior实例呼吁我们收到这样的状态变化回调和偏移我们的底表的变化。

The ItemAdapter.java class has the implementation for the adapter of the RecyclerView as shown below.

ItemAdapter.java类具有RecyclerView适配器的实现，如下所示。

package com.journaldev.bottomsheet;

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

import java.util.List;

class ItemAdapter extends RecyclerView.Adapter {

    private List mItems;
    private ItemListener mListener;

    ItemAdapter(List items, ItemListener listener) {
        mItems = items;
        mListener = listener;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(parent.getContext())
                .inflate(R.layout.bottom_sheet_item, parent, false));
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.setData(mItems.get(position));
    }

    @Override
    public int getItemCount() {
        return mItems.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        TextView textView;
        String item;

        ViewHolder(View itemView) {
            super(itemView);
            itemView.setOnClickListener(this);
            textView = (TextView) itemView.findViewById(R.id.textView);
        }

        void setData(String item) {
            this.item = item;
            textView.setText(item);
        }

        @Override
        public void onClick(View v) {
            if (mListener != null) {
                mListener.onItemClick(item);
            }
        }
    }

    interface ItemListener {
        void onItemClick(String item);
    }
}

The above code is similar to the ones we’ve been implementing in the previous RecyclerView tutorials barring the interface you see.

上面的代码与我们之前在RecyclerView教程中实现的代码相似，但您所看到的界面除外。

The interface is implemented in the MainActivity.java class with the aim to make the onItemClick functionality of RecyclerView similar to a ListView.

该接口在MainActivity.java类中实现，目的是使RecyclerView的onItemClick功能类似于ListView。

Back in the MainActivity.java class,

回到MainActivity.java类，

behavior.setState(BottomSheetBehavior.STATE_EXPANDED); expands the Bottom Sheet. Clicking a RecyclerView item would display a SnackBar and collapse the Bottom Sheet.

behavior.setState(BottomSheetBehavior.STATE_EXPANDED); 展开底表。 单击RecyclerView项将显示SnackBar并折叠底部表。

Let’s look at the application in action.

让我们看看实际的应用程序。

In the above output we can see that the BottomSheet can be dragged down without selecting an item.
To prevent it from collapsing without an item been selected, set the BottomSheetCallBack as:

在上面的输出中，我们可以看到可以将BottomSheet向下拖动而无需选择项目。
为防止未选择任何项目而使其塌陷，请将BottomSheetCallBack设置为：

behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_DRAGGING) {
                    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                // React to dragging events
            }
        });

This brings an end to android bottom sheet tutorial. We’ve implemented the persistent android Bottom Sheet in our application. We’ll delve into modal bottom sheets in a later tutorial. You can download the Android BottomSheet Tutorial from the link below.

这结束了android底层工作表教程。 我们已经在应用程序中实现了持久性android底部表。 在后面的教程中，我们将深入研究模态底层。 您可以从下面的链接下载Android BottomSheet教程。

Download Android Bottom Sheet Example Project 下载Android底表示例项目

翻译自: https://www.journaldev.com/13086/android-bottom-sheet

android 底边框