A, RecyclerView

1. Introduction of RecyclerView

RecyclerView is a class provided in the Support: RecyclerView-V7 package. It has the functions of ListView, GridView, and Gallery classes. So why have these classes above, Google also launched RecyclerView this class? What are its advantages? Compared to ListView, GridView, and Gallery classes, RecyclerView has created a set of standards for ViewHolder. All our custom ViewHolder must inherit RecyclerView.ViewHolder. You then need to initialize the controls used in Item in the constructor. By setting up different LayoutManagers and combining ItemDecoration, ItemAnimator, and ItemTouchHelper, you can achieve cool effects that are difficult to achieve with ListView and other controls. So, how should RecyclerView be used? Here is an example of how to use RecyclerView to achieve ListView function.

2, the use of RecyclerView

First of all, before using RecyclerView, you must rely on RecyclerView in APP Gradle, as shown below:

compile 'com. Android. Support: recyclerview - v7:23.4.0'
Copy the code

Then we need to refer to RecyclerView in the layout file as follows:

<android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/> 
Copy the code

Then, we need to get the RecyclerView instance in the Activity and set the LayoutManager and adapter:

MRecyclerView = findViewById(r.id.recycler_view); / / set RecyclerView manager mRecyclerView. SetLayoutManager (new LinearLayoutManager (this, LinearLayoutManager. VERTICAL,false)); MAdapter = new MyRecyclerViewAdapter(list); // Set the adapter mrecyclerView.setAdapter (mAdapter);Copy the code

MyRecyclerViewAdapter = MyRecyclerViewAdapter

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> { private List<String>  list; public MyRecyclerViewAdapter(List<String> list) { this.list = list; } @Override public MyRecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view_layout, parent,false);
        MyRecyclerViewAdapter.ViewHolder viewHolder = new MyRecyclerViewAdapter.ViewHolder(view);
        return viewHolder;
    }
 
    @Override
    public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {
        holder.mText.setText(list.get(position));
    }
 
    @Override
    public int getItemCount() {
        returnlist.size(); } class ViewHolder extends RecyclerView.ViewHolder { TextView mText; ViewHolder(View itemView) { super(itemView); mText = itemView.findViewById(R.id. item_text_view); }}}Copy the code

The custom MyRecyclerViewAdapter must implement recyclerView. Adapter, which is a generic class in which a custom ViewHolder is passed, The ViewHolder must inherit recyclerView. ViewHolder, where the constructor takes an ItemView object and initializes the required controls. Item_view_layout:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/item_text_view"
        android:layout_width="match_content"
        android:layout_height="wrap_content"
        android:gravity="center"               
        android:text="Item"/>
</LinearLayout>
Copy the code

The above is RecyclerView to achieve all the code of ListView, in fact, and ListView the biggest difference is that Adapter is simplified a lot, ListView need to achieve the getView method in the heavy logic all internalized to RecyclerView internal logic, developers only need to pay attention to the function of itemView.

3. Refer to the article

Since the use of RecyclerView, waist pain no longer, the hand is not acid

Second, the ConstraintLayout

ConstraintLayout 1

ConstraintLayout has been around since Android Studio 2.2. ConstraintLayout is done with XML in traditional Android interface development, and it can be done visually, but it’s not very convenient. ConstraintLayout, however, is the opposite of the traditional way of writing interfaces since ConstaintLayout came along. ConstraintLayout is great for writing interfaces visually, but not so great for writing them in XML. ConstraintLayout, however, has the additional advantage of being an effective layout nesting solution. When we write interfaces, complex layouts are often accompanied by multiple layers of nesting, and the more nesting, the worse the performance of the application. ConstraintLayout, which uses constraints to specify the position and relationship of each control, is similar to but far more powerful than a RelativeLayout.

2, ConstraintLayout use method

With that said, let’s look at ConstraintLayout in action. First, to use ConstraintLayout, add a ConstraintLayout dependency to your app’s Gradle file, as follows:

implementation 'com. Android. Support. The constraint, the constraint - layout: 1.0.2'
Copy the code

Let’s start with a layout:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imgview"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/colorPrimary"/>
    <TextView
        android:id="@+id/feed_textview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is a TextView this is a TextView this is a TextView"
        app:layout_constraintLeft_toRightOf="@+id/imgview"
        app:layout_constraintTop_toTopOf="@+id/imgview"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:id="@+id/time_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="An hour ago."
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/imgview"
        android:layout_marginRight="10dp"/>
</android.support.constraint.ConstraintLayout>
Copy the code

In the layout file above, look first at the ImageView on the left, which has two attributes: app:layout_constraintLeft_toLeftOf and app:layout_constraintTop_toTopOf.

App :layout_constraintLeft_toLeftOf means to align the left edge of the current control with the left edge of the control. App :layout_constraintLeft_toLeftOf= “parent” Description: Align the left edge of the ImageView with the left edge of the parent layout.

Similarly, app:layout_constraintTop_toTopOf= “parent” means that the top of the ImageView is aligned with the parent layout. With these two constraints, the ImageView is uniquely positioned.

Let’s look at another TextView that has three properties, App :layout_constraintLeft_toRightOf, APP :layout_constraintTop_toTopOf, app:layout_constraintRight_toRightOf We clearly know that the constraints on the TextView look like this:

Its left edge is aligned with the right edge of the ImageView. Its top edge is aligned with the top edge of the ImageView. Its right edge is aligned with the right edge of the parent layout.

Similar attributes include:

• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf

3. Another example

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

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/btn1"
        android:layout_alignParentRight="true"
        android:text="button2"/>

</RelativeLayout>
Copy the code

If you convert the above RelativeLayout to ConstraintLayout, the code looks like this:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintRight_toRightOf="parent"
        android:text="button2"/>

</android.support.constraint.ConstraintLayout>
Copy the code

Replace Android :layout_toRightOf=”@+id/btn1″ with app:layout_constraintLeft_toRightOf=”@+ ID /btn1″, Changed Android :layout_alignParentRight=”true” to app:layout_constraintRight_toRightOf=”parent”. But the effect is not very ideal:

When a control has its own set width, such as warp_Content or fixed value, we add “constraints” to the control, which act like a rubber band that pulls the control but does not change its size.

In the example above, when Btn2 is small, we set one constraint to the left (right of BTN1) and one constraint to the right (right-aligned parent), and when both constraints are in effect (you can think of both as the same tension), btn2 is centered.

What happens when bTN2 sets the width to be extremely large and the two forces are still the same? This will cause the left and right to exceed the same distance.

So how can BTN2 achieve this effect? We can set the width of btn2 to 0dp because 0 stands for MATCH_CONSTRAINT in ConstraintLayout. As the name implies, this constant is the same size as the constraint. Here is the correct code:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintRight_toRightOf="parent"
        android:text="button2"/>

</android.support.constraint.ConstraintLayout>
Copy the code

4, add a banner

Now we add a banner to the top of the first layout and set its aspect ratio to 16:6. As shown below:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imgview"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/banner"
        android:background="@color/colorPrimary"/>
    <TextView
        android:id="@+id/feed_textview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is a TextView this is a TextView this is a TextView"
        app:layout_constraintLeft_toRightOf="@+id/imgview"
        app:layout_constraintTop_toTopOf="@+id/imgview"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:id="@+id/time_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="An hour ago."
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/imgview"
        android:layout_marginRight="10dp"/>

    <TextView
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintDimensionRatio="" "
        android:gravity="center"
        android:text="banner"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/imgview"/>
</android.support.constraint.ConstraintLayout>
Copy the code

Here, we use the app:layout_constraintDimensionRatio attribute, which by default is meant to represent the aspect ratio, and we set it to 16:6, which means that when the width is fixed to the constraint size (screen width), the height will be adjusted accordingly. There are two other ways to write app:layout_constraintDimensionRatio:

app:layout_constraintDimensionRatio=”W,16:6″ app:layout_constraintDimensionRatio=”H,16:6″

App: layout_constraintTablespace Ratio=”H,16:6″, which is the same as the default, indicating the aspect ratio. Because H means to use height (H for height) as the denominator in the following 16:6. So app:layout_constraintDimensionRatio=”W,16:6″, which is the denominator.

Add a few tabs

We now need to add three tabs at the bottom and split them evenly. This is kind of like the meaning of LinearLayout and weight. Let’s take a look at how it looks:

<? xml version="1.0" encoding="utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imgview"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/banner"
        android:background="@color/colorPrimary"/>
    <TextView
        android:id="@+id/feed_textview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is a TextView this is a TextView this is a TextView"
        app:layout_constraintLeft_toRightOf="@+id/imgview"
        app:layout_constraintTop_toTopOf="@+id/imgview"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:id="@+id/time_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="An hour ago."
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/imgview"
        android:layout_marginRight="10dp"/>

    <TextView
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintDimensionRatio="" "
        android:gravity="center"
        android:text="banner"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/imgview"/>

    <Button
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <Button
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="tab2"
        app:layout_constraintLeft_toRightOf="@+id/tab1"
        app:layout_constraintRight_toLeftOf="@+id/tab3"
        app:layout_constraintBottom_toBottomOf="parent"/>


    <Button
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="tab3"
        app:layout_constraintLeft_toRightOf="@+id/tab2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>
Copy the code

We added three tabs and made them dependent on each other so that the left of tab1 was aligned to the left of the parent and the right was aligned to the left of tab2. The left of tab2 is aligned with the right of tab1, and the right is aligned with the left of tab3. The left of tab3 is aligned to the right of tab2 and the right is aligned to the right of parent. This allows three tabs to evenly divide the entire screen. So bisect is implemented, so you can implement the LinearLayout and weight to separate control to achieve different proportion configuration effect? It’s actually possible. ConstraintLayout provides the app:layout_constraintHorizontal_weight attribute, which enables different tabs to occupy different proportions. If we set each of the top three tabs to 2:1:1, we can achieve the following effect:

app:layout_constraintHorizontal_weight
ConstraintLayout Optimize your layout

6. Refer to the article

Explain the rise of ConstraintLayout explain the rise of ConstraintLayout Optimize your layout