HorizontalScrollView 实现水平滚动

最新推荐文章于 2024-08-23 10:43:07 发布

lhlh113815

最新推荐文章于 2024-08-23 10:43:07 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lhlh113815/article/details/47338363

本文详细介绍了如何使用Android实现类似于爱奇艺的视频筛选功能，包括电影类型、地区、年代等筛选条件，并通过自定义LinearLayout、自定义适配器和HorizontalScrollView实现了水平滚动和点击事件。通过定义接口、自定义适配器和布局文件，成功实现在不同类别下的视频筛选和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个视频播放的项目，其中一个功能是要实现类似于爱奇艺对片库进行筛选功能（比如电影的类型、地区、年代...），如下图一截图红色圈中部分，被红色圈住的部分每一行可以水平滚动，每一个选项可以点击，接下来我们来实现这个功能

图二是实现的功能。

我们知道要实现垂直滚动可以借助ScrollView，那水平滚动呢？当然选择HorizontalScrollView。

(一)布局文件

<com.chinasvc.bucphone.view.CateLayout
android:id="@+id/cate_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:paddingTop="4dp"
android:scrollbars="none" >

<com.chinasvc.bucphone.view.CateLayout
android:id="@+id/region_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:paddingTop="4dp"
android:scrollbars="none" >

<com.chinasvc.bucphone.view.CateLayout
android:id="@+id/year_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>

<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:scrollbars="none" >

<com.chinasvc.bucphone.view.CateLayout
android:id="@+id/hot_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>
</LinearLayout>

其中 com.chinasvc.bucphone.view.CateLayout 是我们自定义的LinearLayout

（二）自定义LinearLayout

public class CateLayout extends LinearLayout {
private CategoryAdapter adapter;
private Context context;
private onItemClickListener mOnItemClickListener;

public CateLayout(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
public interface onItemClickListener {
public void onItemClick(TextView view);
}
public void setOnItemClickListener(onItemClickListener listener) {
mOnItemClickListener = listener;
}
public void setAdapter(CategoryAdapter adapter) {
this.adapter = adapter;
for (int i = 0; i < adapter.getCount(); i++) {
final Map<String, Object> map = adapter.getItem(i);
TextView view = adapter.getView(i, null, null);
view.setPadding(14, 0, 14, 0);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mOnItemClickListener.onItemClick((TextView)view);
Toast.makeText(context, " " + map.get("text"),
Toast.LENGTH_SHORT).show();
}
});
this.setOrientation(HORIZONTAL);
this.addView(view, new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
}
}
}

在这里我们定义了一个回调接口interface onItemClickListener ，用于在实现它的地方进行点击回调。

（三）实现一个继承于baseAdapter的适配器。

public class CategoryAdapter extends BaseAdapter {
private List<Map<String, Object>> list;
private Context context;
private LayoutInflater mInflater;

public CategoryAdapter(Context context) {
this.context = context;
mInflater = LayoutInflater.from(context);
this.list = new ArrayList<Map<String, Object>>();
}

@Override
public int getCount() {
return list.size();
}

@Override
public Map<String, Object> getItem(int location) {
return list.get(location);
}

@Override
public long getItemId(int arg0) {
return arg0;
}

public void addObject(Map<String, Object> map) {
list.add(map);
notifyDataSetChanged();
}

@Override
public TextView getView(int location, View convertView, ViewGroup parent) {
Map<String, Object> map = getItem(location);
TextView textView = new TextView(context);
textView.setTextColor(Color.parseColor("#777777"));
textView.setTextSize(18);
textView.setText(map.get("text").toString());
return textView;
}
}

（四）在activity 里进行相关调用

private void initCategoryPart() {
LinearLayout mConLayout = (LinearLayout) this
.findViewById(R.id.cate_layout_container);

cateLayout=(CateLayout)findViewById(R.id.cate_layout);
categoryAdapter=new CategoryAdapter(this);
for(int i=0;i<30;i++){
Map<String,Object> map=new HashMap<String,Object>();
map.put("text", "类型"+(i+1));
categoryAdapter.addObject(map);
}
cateLayout.setAdapter(categoryAdapter);
cateLayout.setOnItemClickListener(new onItemClickListener() {
TextView tempView = null;
@Override
public void onItemClick(TextView view) {
// TODO Auto-generated method stub
if(null == tempView){
tempView = view;
}else {
tempView.setTextColor(Color.parseColor("#777777"));
}
view.setTextColor(Color.parseColor("#ff9a00"));
tempView = view;
}
});

regoinLayout=(CateLayout)findViewById(R.id.region_layout);
regoinAdapter=new CategoryAdapter(this);
for(int i=0;i<30;i++){
Map<String,Object> map=new HashMap<String,Object>();
map.put("text", "地区"+(i+1));
regoinAdapter.addObject(map);
}
regoinLayout.setAdapter(regoinAdapter);
regoinLayout.setOnItemClickListener(new onItemClickListener() {
TextView tempView = null;
@Override
public void onItemClick(TextView view) {
// TODO Auto-generated method stub
if(null == tempView){
tempView = view;
}else {
tempView.setTextColor(Color.parseColor("#777777"));
}
view.setTextColor(Color.parseColor("#ff9a00"));
tempView = view;
}
});

yearLayout=(CateLayout)findViewById(R.id.year_layout);
yearAdapter=new CategoryAdapter(this);
for(int i=0;i<15;i++){
Map<String,Object> map=new HashMap<String,Object>();
map.put("text",(2000+i)+"年");
yearAdapter.addObject(map);
}
yearLayout.setAdapter(yearAdapter);
yearLayout.setOnItemClickListener(new onItemClickListener() {
TextView tempView = null;
@Override
public void onItemClick(TextView view) {
// TODO Auto-generated method stub
if(null == tempView){
tempView = view;
}else {
tempView.setTextColor(Color.parseColor("#777777"));
}
view.setTextColor(Color.parseColor("#ff9a00"));
tempView = view;
}
});

hotLayout=(CateLayout)findViewById(R.id.hot_layout);
hotAdapter=new CategoryAdapter(this);
for(int i=0;i<10;i++){
Map<String,Object> map=new HashMap<String,Object>();
map.put("text", "最新上映"+(i+1));
hotAdapter.addObject(map);
}
hotLayout.setAdapter(hotAdapter);
hotLayout.setOnItemClickListener(new onItemClickListener() {
TextView tempView = null;
@Override
public void onItemClick(TextView view) {
// TODO Auto-generated method stub
if(null == tempView){
tempView = view;
}else {
tempView.setTextColor(Color.parseColor("#777777"));
}
view.setTextColor(Color.parseColor("#ff9a00"));
tempView = view;
}
});
}

至此水平滚动加点击实现了