Android custom empty data prompt interface EmptyView


On Fastandrutils

Fastandrutils is a set of commonly used tools for android development, including customized view controls.
This can reduce copy and paste code, thereby reducing duplicate code, and do not need to go to Google Baidu for a common function, so that the code is more concise, so that development is more efficient.
At the same time, I hope that your addition will make android development easier.

github address, if you're interested, you might as well give some support.
Personal blog

After advertising, get to the point



Let's not say much. Let's start with the picture.

In the process of development, the most common is the interaction between data and interface, such as the interface display when there is no data, the interface display when the network is out of time. For these abnormal data, we need to do some abnormal display interface, rather than a blank interface, so doing some abnormal interface processing, the user experience will be better.
Source address

function

  1. Display loading interface
  2. Display Failure Interface
  3. Customizable empty interface

Description of FEmpty View

There's a little bit more code, so stick some key ones.

  • FEmptyView inherits FrameLayout
  • Attributes in FEmptyView
    private LinearLayout setdataLay;//Setting up data layout
    private View emptyView;//Empty layout
    private ImageView emptyImg;//ImageView of Empty Layout
    private TextView emptyTv;//TextView of Empty Layout
    private Button emptyBt;//Button of empty layout
    private Context context;
  • To customize the configurable interface, add custom attrs
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EmptyLayout">
        <attr name="empty_layout" format="reference" />//layout file of empty interface
        <attr name="empty_imageView" format="reference" />//id of empty interface imageView
        <attr name="empty_textView" format="reference" />//id of empty interface textView
        <attr name="empty_button" format="reference" />//id of empty interface button
        <attr name="include_layout" format="reference" />//layout file of data display interface
    </declare-styleable>
</resources>
  • FEmptyView Initializes Interface Layout
 private void initView(TypedArray array) {
        int emptyViewId = array.getResourceId(FResourcesUtils.getStyleable("EmptyLayout_empty_layout"), FResourcesUtils.getLayoutResources("f_empty_layout"));
        int emptyImgId = array.getResourceId(FResourcesUtils.getStyleable("EmptyLayout_empty_imageView"), FResourcesUtils.getIdResources("empty_img"));
        int emptyTvId = array.getResourceId(FResourcesUtils.getStyleable("EmptyLayout_empty_textView"), FResourcesUtils.getIdResources("empty_tv"));
        int emptyBtId = array.getResourceId(FResourcesUtils.getStyleable("EmptyLayout_empty_button"), FResourcesUtils.getIdResources("empty_bt"));
        int dataViewId = array.getResourceId(FResourcesUtils.getStyleable("EmptyLayout_include_layout"), 0);
        //Get empty layout View
        emptyView = View.inflate(context, emptyViewId, null);
        //Get an imageView of an empty layout
        emptyImg = (ImageView) emptyView.findViewById(emptyImgId);
        emptyTv = (TextView) emptyView.findViewById(emptyTvId);
        emptyBt = (Button) emptyView.findViewById(emptyBtId);
        setdataLay = new LinearLayout(context);//First add a Linear Layout
        setdataLay.setOrientation(LinearLayout.VERTICAL);
        setdataLay.setVisibility(GONE);
        if (dataViewId != 0) {
            addChildViewid(dataViewId);//Add the data interface to Linear Layout
        }
        addView(setdataLay);
        addView(emptyView);
    }
  • The default empty interface layout has an ImageView, a TextView, Button
<?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:background="@android:color/white"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/empty_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxHeight="200dp"
        android:maxWidth="200dp" />

    <TextView
        android:id="@+id/empty_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textSize="16sp" />

    <Button
        android:id="@+id/empty_bt"
        android:layout_width="120dp"
        android:layout_height="40dp"
        android:layout_marginTop="6dp" />

</LinearLayout>
  • Some Methods of FEmpty View
    Void loading ()// Display loading interface
    void loaddingSuccess() successfully retrieves data and hides EmptyView
    Void loadingFail () loading failure interface
    ...

We omitted many methods and looked at the source code in detail.

  • ImagView callback
    In order to better show ImagView, I wrote a callback method to solve the ImagView animation and so on.
/**
 * ImagView Callback
 */
    public interface ImgCallBack {
        void setImg(ImageView img, int emptyType);
    }
  • emptyView callback
    If you want to customize emptyView in more depth, you also return emptyView, so you can get all the emptyView controls.
/**
     * emptyView Callback
     */
    public interface ViewCallBack {
        void emptyViewCallBack(View view);
    }

FEmptyView uses

The first method of use

  1. Adding xml to use
 <cn.hotapk.fastandrutils.widget.FEmptyView
        android:id="@+id/empty_lay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:include_layout="@+layout/data_layout" />

FEmptyView cannot add sub-View under xml
This is the only way to add a data interface

  app:include_layout="@+layout/data_layout"

In oncreate () method

 empty_lay = (FEmptyView) findViewById(R.id.empty_lay);
 empty_lay.loadding("Loading data...");
 empty_lay.loaddingFail("Loading data failed...", "Click refresh", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        loadding();
                    }
                }, new FEmptyView.ImgCallBack() {
                    @Override
                    public void setImg(ImageView img, int emptyType) {
                        img.setBackgroundResource(R.mipmap.loaddingfail);
                        if (img.getAnimation() != null)
                            img.getAnimation().cancel();
                    }
                });

The second method of use

<cn.hotapk.fastandrutils.widget.FEmptyView
        android:id="@+id/empty_lay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

FEmptyView cannot add sub-View under xml
You can only add data interfaces like this in oncreate ().

        empty_lay.addChildView(childView);

Later use of the first

The third method of use

Customizable emptyView

 <cn.hotapk.fastandrutils.widget.FEmptyView
        android:id="@+id/empty_lay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:empty_button="@+id/custom_empty_bt"//The id of the button that customizes the layout
        app:empty_imageView="@+id/custom_empty_img"//id of imageView for custom layout
        app:empty_textView="@+id/custom_empty_tv"//The id of a custom layout textView
        app:empty_layout="@+layout/custom_empty_layout"//Customized empty layout interface
        app:include_layout="@+layout/data_layout" />//Display data layout

FEmptyView also cannot add sub-View under xml
This is the only way to add a data interface

  app:include_layout="@+layout/data_layout"

Later use is the same as the first.

Fourth method of use

Deeply customizable emptyView

 <cn.hotapk.fastandrutils.widget.FEmptyView
        android:id="@+id/empty_lay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:empty_layout="@+layout/custom_empty_layout"//Customized empty layout interface
        app:include_layout="@+layout/data_layout" />//Display data layout

Deep customization
The code returns a custom emptyView

    public View getEmptyView() {
        return emptyView;
    }

You can find ViewById to get custom controls
Later use is similar to the first.

Android custom empty data prompt interface EmptyView explained

Keywords: Android xml encoding Google

Added by eroticheretic on Wed, 22 May 2019 03:33:07 +0300