Android实现信息展示时,使用轮播图是比较常态化的,轮播图展示内容,既美观又大方。
实现效果
在layout-xml(layout\fragment_home.xml)布局文件中可以这样定义
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/ll_conv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.jude.rollviewpager.RollPagerView
android:id="@+id/vp_lunbo"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#66000000"
app:rollviewpager_play_delay="3000"/>
<LinearLayout
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:background="#66000000"
android:orientation="vertical"
android:layout_gravity="bottom"
>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textColor="#fff"
android:textSize="20dp"
android:text="Content"
/>
<LinearLayout
android:id="@+id/ll_point"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
使用帧布局将标题(TextView)内容层叠显示在底部,设置透明黑底#66000000,控件为com.jude.rollviewpager.RollPagerView
在Java-Activity文件中,内部类继承LoopPagerAdapter适配器。
public class VpageAdapter extends LoopPagerAdapter {
String[] imgs = new String[0];
private Context mContext;
public VpageAdapter(Context mContext,RollPagerView viewPager) {
super(viewPager);
this.mContext = mContext;
}
@Override
public int getItemPosition(Object object) {
int pos = super.getItemPosition(object);
return pos;
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return super.getPageTitle(position);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
textView.setText(Constants.title[position%3]); //标题设置关键部分
return super.instantiateItem(container, position);
}
@Override
public View getView(ViewGroup container, int position) {
ImageView view = new ImageView(container.getContext());
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
Glide.with(mContext).load(Constants.URL[position]).into(view);
textView.setText(Constants.title[position]);
return view;
}
@Override
public int getRealCount() {
return Constants.URL.length;
}
}
定义图片文件和标题文字部分
private static class Constants{
public static String[] URL = {
"http://5b0988e595225.cdn.sohucs.com/images/20200308/4df8913d937e4171aaaa8d5ce4c8ef2b.JPG",
"http://5b0988e595225.cdn.sohucs.com/images/20200308/5155c0bce4d54384808419829e1472dc.jpeg",
"http://5b0988e595225.cdn.sohucs.com/images/20200308/fcae688df0cc4197b7c6ea35807852e9.jpeg",
};
public static String[] title = {
"美国感染新冠病毒人数急剧攀升",
"美国总统特朗普发表新型冠状肺炎看法",
"新冠疫苗研发出现突破性进展"
};
}
}
在页面创建时,设置适配器
public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_home, container, false);
//轮播图
vp_lunbo = root.findViewById(R.id.vp_lunbo); //RollPagerView组件
textView = root.findViewById(R.id.textview); //标题文本内容
VpageAdapter vpageAdapter = new VpageAdapter(this.getActivity(),vp_lunbo);
vp_lunbo.setAdapter(vpageAdapter);
}