UI Design for Android Mobile Phone - "Knowing" Interface Appearance Imitation Chapter (6) - - Using Gallery and Listview in Fragment to achieve listview glide

Keywords: Android Attribute Java xml

This is followed by the last blog's Android mobile phone UI design - "Know" imitation of the interface design six.

Task Goal: Using Gallery and listview to achieve listview skidding

PS: I did this with Android Studio 2.3. Because I'm new to Android, I want to imitate a page to practice. So, this is the imitation of the "know-it" mobile APP appearance of the interface.

Functions to be achieved:

The Slip of listview

This is implemented using ListView and Gallery, custom Gallery List Adapter adapter.

Interface Operating Effect Diagram

Source code:

FindFragment.Java code: completes the listview skidding effect.

package com.example.lenovo.design;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.AnimatedStateListDrawable;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Timer;
import java.util.TimerTask;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by lenovo on 2017/3/28.
 */


public class FindFragment extends Fragment implements AdapterView.OnItemSelectedListener {

    Gallery list_gallery;
    private GalleryListAdapter adapter_lg;
    private int i = 0;

    private ListView listViewlv;
    private SimpleAdapter adapterlv ;
    private List<Map<String,Object>> listlv=new ArrayList<Map<String,Object>>();  //Create another collection for Method 2
    private int[] imagelv = new int[] { R.drawable.z1, R.drawable.xx2,
            R.drawable.xx3, R.drawable.xx4};
    private  String[] mTitlelv = { "petroleum", "Study", "U.S.A", "Culture" };
      private  String[] mZlv = { "142 follow", "134 follow", "755 follow", "543 follow" };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View findLayout = inflater.inflate(R.layout.find_layout, container, false);

        //Associate listView with layout objects
        listViewlv = (ListView) findLayout.findViewById(R.id.lv);
        for(int i = 0; i < mZlv.length; i ++){
            Map<String,Object> item = new HashMap<String,Object>();
            item.put("img", imagelv[i]);
            item.put("title",mTitlelv[i]);
            item.put("zan", mZlv[i]);
            listlv.add(item);
        }
        adapterlv = new SimpleAdapter(getActivity(),listlv,R.layout.find_mylist,
                new String[]{"img","title","zan"},new int[]{R.id.img,R.id.title,R.id.gz});
        listViewlv.setAdapter(adapterlv);
        //Hide listview and its height
        listViewlv.setVisibility(View.GONE);


        //Define the Gallery control and find the list based on the ID
        list_gallery = (Gallery)findLayout.findViewById(R.id.list);

        //Initialize a custom image adapter
        adapter_lg=new GalleryListAdapter(getActivity());
        //Binder Adapter
        list_gallery.setAdapter(adapterlv);
        //Setting Picture Start Position
        list_gallery.setSelection(1);
        //Picture Selection Monitor Event
        list_gallery.setOnItemSelectedListener(this);

        return findLayout;

    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
         //When sliding, event response calls this method in the adapter.
        adapter_lg.setSelectItem(position);
    }

    public void onNothingSelected(AdapterView<?> parent) {
    }

}

Code for GalleryListAdapter.java: Custom adapter

package com.example.lenovo.design;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

/**
 * Created by lenovo on 2017/4/6.
 */

public class GalleryListAdapter extends BaseAdapter {
    Context c;
    private int selectItem;
    //Add the image ID to the Integer [] array
    int[] imageIDs = new int[] {
            R.drawable.xx4,
            R.drawable.xx2,
            R.drawable.xx3,
            R.drawable.xx4,
    };
    public GalleryListAdapter(Context c){
        this.c=c;
    }

    //This property determines how many images the Gallery control displays
    @Override
    public int getCount() {
        //return  imageIDs.length;
        return Integer.MAX_VALUE;//Infinite cycle
    }
    //Default code, to retrieve the object at the specified location, to redefine the code in this method
    @Override
    public Object getItem(int position) {
        return position;
    }
    //Default code, to retrieve the ID object at the specified location, to redefine the code in this method
    @Override
    public long getItemId(int position) {
        return position;
    }
    //setSelectItem is a method in the custom adapter to obtain the currently selected Item item.
    // Then call notifyDataSetInvalidated();
    public void setSelectItem(int selectItem) {

        if (this.selectItem != selectItem) {
            this.selectItem = selectItem;
            //Notify the adapter to update data
            notifyDataSetChanged();//Redraw the current visible area
        }
    }
    //The return value VIew represents each image displayed in the Gallery control
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(c);
        //Redundancy, let the picture cycle browse
        imageView.setImageResource(imageIDs[position % imageIDs.length]);
      imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

        imageView.setLayoutParams(new Gallery.LayoutParams(200, 400));
        return imageView;

    }

}

Realization of Interface Layout

The code for find_layout.xml:

<?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">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">
    <Gallery
        android:layout_below="@+id/lv"
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:unselectedAlpha="0.6"
        android:visibility="visible"
        />
</LinearLayout>

            <com.example.lenovo.design.MyListView
                android:id="@+id/listview3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:entries="@array/title">

            </com.example.lenovo.design.MyListView>

</RelativeLayout>

Code for find_mylist.xml: Custom listview layout

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

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/xx1" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:orientation="vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:text="Artificial intelligence"
                android:textColor="@color/black"
                android:textSize="35px" />

            <TextView
                android:id="@+id/gz"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginTop="10dp"
                android:text="15k follow"
                android:textColor="@color/dimgrey"
                android:textSize="25px" />


        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Conclusion:

This is one of my listview slippery ways, mainly because I can't figure out other listview slippery ways! Heartache!
Actually, this is a bit bad, I know. It also hides listview.
If you really want to refer to it, it's better to look at other people, although I have read it many times, but I don't understand it.
Address through: http://blog.csdn.net/yanzi1225627/article/details/21294553

Posted by bluns on Wed, 13 Feb 2019 21:27:18 -0800