前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android实现图片轮播列表

Android实现图片轮播列表

作者头像
砸漏
发布2020-11-02 16:29:10
4.3K0
发布2020-11-02 16:29:10
举报
文章被收录于专栏:恩蓝脚本

这个效果在交友app中比较常见,一般作为首页使用,顶部是一个自动轮播的ViewPager,下面放一个横向LinearLayout,最下面要放一个ListView,但是注意这三个部分都支持滑动,应该和固定在顶部的标题栏和底部的操作栏分开,也就是把ViewPager和LinearLayout以及ListView都放在父控件ScrollView里面

布局文件代码:

代码语言:javascript
复制
<?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:orientation="vertical" 
<include layout="@layout/title_bar"/ 
<ScrollView
android:layout_width="match_parent"
android:id="@+id/sv"
android:layout_height="0dp"
android:layout_weight="1" 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" 
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="200dp"/ 
<LinearLayout
android:id="@+id/ivs"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="10dp"
android:orientation="horizontal" 
<ImageView
android:id="@+id/iv1"
android:layout_weight="1"
android:layout_marginStart="30dp"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/index_icon"/ 
<ImageView
android:id="@+id/iv2"
android:layout_weight="1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/index_icon"/ 
<ImageView
android:id="@+id/iv3"
android:layout_weight="1"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/index_icon"/ 
<ImageView
android:id="@+id/iv4"
android:layout_weight="1"
android:layout_marginEnd="30dp"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/index_icon"/ 
</LinearLayout 
<com.oridway.www.uiframe.utils.ListViewForScrollView
android:id="@+id/lvfsv"
android:layout_width="match_parent"
android:layout_height="wrap_content"/ 
</LinearLayout 
</ScrollView 
<LinearLayout
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="horizontal" 
<TextView
android:id="@+id/index"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:drawableTop="@drawable/ic_home_black_24dp"
android:gravity="center"
android:text="首页"
android:textColor="@color/black" / 
<TextView
android:id="@+id/message"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:drawableTop="@drawable/ic_message_black_24dp"
android:gravity="center"
android:text="消息"
android:textColor="@color/black" / 
<TextView
android:id="@+id/community"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:drawableTop="@drawable/ic_people_black_24dp"
android:gravity="center"
android:text="社区"
android:textColor="@color/black" / 
<TextView
android:id="@+id/self"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:drawableTop="@drawable/ic_person_black_24dp"
android:gravity="center"
android:text="我"
android:textColor="@color/black" / 
</LinearLayout 
</LinearLayout 

主窗口代码:

代码语言:javascript
复制
public class IndexActivity extends AppCompatActivity implements View.OnClickListener{
private Context mContext;
private List<Integer  mImageList;
private List<Candidate  mCandidateList;
private ViewPagerAdapter mPagerAdapter;
private CandidateListAdapter mListAdapter;
@SuppressLint("HandlerLeak")
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
//每次将当前的位置加1,也就是向右滑动一次
vp.setCurrentItem(vp.getCurrentItem() + 1);
//递归无限循环调用
handler.sendEmptyMessageDelayed(0x123, 2000);
}
};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_index);
ButterKnife.bind(this);
initData();
initView();
intListener();
}
//初始化数据源,固定写法 1.实例化容器 2.实例化适配器 3.设置适配器
private void initData() {
mContext = this;
mImageList = new ArrayList< ();
mCandidateList = new ArrayList< ();
mListAdapter = new CandidateListAdapter(mCandidateList);
mPagerAdapter = new ViewPagerAdapter(mImageList);
lvfsv.setAdapter(mListAdapter);
vp.setAdapter(mPagerAdapter);
getListData(10);
getPagerData();
//间隔2秒发送一次信息
handler.sendEmptyMessageDelayed(0x123, 2000);
}
//生成ViewPager数据源
private void getPagerData() {
mImageList.add(R.drawable.bm1);
mImageList.add(R.drawable.bm2);
mImageList.add(R.drawable.bm3);
mImageList.add(R.drawable.bm4);
mImageList.add(R.drawable.bm5);
mImageList.add(R.drawable.bm6);
mPagerAdapter.notifyDataSetChanged();
//初始的位置在正中间
vp.setCurrentItem(mPagerAdapter.getCount() / 2);
}
//生成ListView数据源
private void getListData(int num) {
for (int i = 0; i < num; i++) {
Candidate candidate = new Candidate();
candidate.setName("姓名:尼尔斯·亨利克·戴维·玻尔");
candidate.setInfo("职业:学者,物理学家,足球运动员");
candidate.setTrait("成就:哥本哈根学派的创始人,1922年获得诺贝尔物理学奖");
mCandidateList.add(candidate);
}
mListAdapter.notifyDataSetChanged();
}
private void initView() {
tvTitleMiddle.setText("轮播列表");
//手动设置ScrollView的位置
scrollView.smoothScrollTo(0, 0);
}
//初始化监听
private void intListener() {
mPagerAdapter.setmCallback((v, position) -  {
Toast.makeText(mContext, "position: " + position, Toast.LENGTH_SHORT).show();
});
lvfsv.setOnItemClickListener((parent, view, position, id) -  {
Toast.makeText(mContext, "position: " + position, Toast.LENGTH_SHORT).show();
});
for (int i = 0; i < 4; i++) {
ivs.getChildAt(i).setOnClickListener(this);
}
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.iv1:
case R.id.iv2:
case R.id.iv3:
case R.id.iv4:
Toast.makeText(mContext, "此处跳转", Toast.LENGTH_SHORT).show();
}
}
}

ListView需要覆盖onMeasure方法,代码如下:

代码语言:javascript
复制
public class ListViewForScrollView extends ListView {
public ListViewForScrollView(Context context) {
super(context);
}
public ListViewForScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ListViewForScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
@Override
/**
* 重写该方法,达到使ListView适应ScrollView的效果
*/
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE    2,
MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec);
}
}

ViewPager适配器代码:

代码语言:javascript
复制
public class ViewPagerAdapter extends PagerAdapter implements View.OnClickListener {
//图片的资源id列表
private List<Integer  mList;
private Callback mCallback;
public ViewPagerAdapter(List<Integer  mList) {
this.mList = mList;
}
public void setmCallback(Callback mCallback) {
this.mCallback = mCallback;
}
public interface Callback {
void onClick(View v, int position);
}
@Override
//将适配器中的数据设为无穷大
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
//固定写法,不覆盖会报错
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
@Override
//固定写法
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
LayoutInflater inflater = LayoutInflater.from(container.getContext());
ImageView imageView = (ImageView) inflater.inflate(R.layout.item_image_pager, null);
//将position转换成余数
int realPosition = position % mList.size();
imageView.setImageResource(mList.get(realPosition));
imageView.setOnClickListener(this);
//tag放跳转需要的数据
imageView.setTag(realPosition);
//将实例加入父控件
container.addView(imageView);
return imageView;
}
@Override
//使用接口将position回传
public void onClick(View v) {
mCallback.onClick(v, (int) v.getTag());
}
}

大功告成,实现效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档