Android手机UI设计---”知乎“界面外观模仿篇（六）---在Fragment里使用Gallery结合listview实现listview横滑

最新推荐文章于 2021-05-26 10:55:02 发布

鲨鱼哇咔咔

最新推荐文章于 2021-05-26 10:55:02 发布

阅读量1k

点赞数

分类专栏： Android 文章标签： android ui ui设计手机界面

本文链接：https://blog.csdn.net/m0_37808229/article/details/69568592

版权

Android 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这是接着上一篇博客的Android手机UI设计—“知乎”模仿的界面设计六。

任务目标：使用Gallery结合listview实现listview横滑

PS：这个我是用Android Studio2.3做的。由于自己初学Android，想模仿一个页面来练手。于是，这个是模仿的“知乎”手机APP外观的界面。

要实现的功能：

listview的横滑

这个是使用ListView和Gallery的方式来实现的，自定义GalleryListAdapter适配器。

界面运行效果图

这里写图片描述

源码：

FindFragment.Java的代码：完成listview横滑的效果。

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>>();  //为方法二创建另一个集合
    private int[] imagelv = new int[] { R.drawable.z1, R.drawable.xx2,
            R.drawable.xx3, R.drawable.xx4};
    private  String[] mTitlelv = { "石油", "学习", "美国", "文化" };
      private  String[] mZlv = { "142关注", "134关注", "755关注", "543关注" };

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

        //将listView与布局对象关联
        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);
        //隐藏listview，以及它的高度
        listViewlv.setVisibility(View.GONE);


        //定义 Gallery 控件,根据ID寻找到list
        list_gallery = (Gallery)findLayout.findViewById(R.id.list);

        //初始化自定义的图片适配器
        adapter_lg=new GalleryListAdapter(getActivity());
        //绑定适配器
        list_gallery.setAdapter(adapterlv);
        //设置图片起始位置
        list_gallery.setSelection(1);
        //图片选择监听事件
        list_gallery.setOnItemSelectedListener(this);

        return findLayout;

    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
         //当滑动时，事件响应，调用适配器中的这个方法。
        adapter_lg.setSelectItem(position);
    }

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

}

GalleryListAdapter.java的代码：自定义适配器

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;
    //往Integer[]数组加入图片ID
    int[] imageIDs = new int[] {
            R.drawable.xx4,
            R.drawable.xx2,
            R.drawable.xx3,
            R.drawable.xx4,
    };
    public GalleryListAdapter(Context c){
        this.c=c;
    }

    //这个属性决定Gallery控件显示多少张图片
    @Override
    public int getCount() {
        //return  imageIDs.length;
        return Integer.MAX_VALUE;//无限循环
    }
    //默认代码，想取指定位置的对象，要重定义这个方法中的代码
    @Override
    public Object getItem(int position) {
        return position;
    }
    //默认代码，想取指定位置的ID对象，要重定义这个方法中的代码
    @Override
    public long getItemId(int position) {
        return position;
    }
    //setSelectItem是自定义适配器里面的方法,用于获得当前的选中的Item项，
    // 然后接着调用notifyDataSetInvalidated();
    public void setSelectItem(int selectItem) {

        if (this.selectItem != selectItem) {
            this.selectItem = selectItem;
            //通知适配器更新数据
            notifyDataSetChanged();//重绘当前可见区域
        }
    }
    //返回值VIew代表每一个显示在Gallery控件中的图片
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(c);
        //取余，让图片循环浏览
        imageView.setImageResource(imageIDs[position % imageIDs.length]);
      imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

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

    }

}

界面布局的具体实现

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>

find_mylist.xml的代码：自定义listview布局

<?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="人工智能"
                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关注"
                android:textColor="@color/dimgrey"
                android:textSize="25px" />


        </LinearLayout>

    </LinearLayout>

</LinearLayout>

总结：

这是我的一个listview横滑的办法，主要是我弄不出来其他的listview横滑的办法！心痛！
其实，这个有点不好，我知道。它还要隐藏listview。
真正要参考的话，还是看看人家的好，虽然人家的我看了好多遍，没有看懂。
地址直通：http://blog.csdn.net/yanzi1225627/article/details/21294553

鲨鱼哇咔咔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android手机UI设计---”知乎“界面外观模仿篇（六）---在Fragment里使用Gallery结合listview实现listview横滑

这是接着上一篇博客的Android手机UI设计—“知乎”模仿的界面设计六。任务目标：使用Gallery结合listview实现listview横滑PS：这个我是用Android Studio2.3做的。由于自己初学Android，想模仿一个页面来练手。于是，这个是模仿的“知乎”手机APP外观的界面。要实现的功能： listview的横滑这个是使用ListView和Gallery的方式来实现的，自定义
复制链接

扫一扫