使用后台容器在自定义列表视图上加载动态数据

Posted 2023-04-15

【中文标题】使用后台容器在自定义列表视图上加载动态数据

【英文标题】：Dynamic data loading on custom List-view with background container

【发布时间】：2013-04-03 17:22:30

【问题描述】：

我完全对我的图像列表视图感到困惑。 我想在带有背景容器的单行中显示 2 个视频海报和文本视图（检查火车的附加图像）

这是垂直列表视图的单个单元格。

根据视频的数量，我必须显示垂直列表视图，但每行包含 2 个视频海报和文本视图，视频旁边有火车引擎图像，行号开始或结束，反之亦然。

为了实现这个 UI，我编写了一个自定义适配器，在其中我设法通过使用相对布局来显示带有相关图像视图的火车车厢。

但是我如何管理单行上特定项目（行中的特定视频）的点击监听器。以及如何在每行的开头或结尾添加火车图像

这是我的代码的输出。

这是我的代码

public void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.main);
    final Context context = CustomAdapterExample.this;
    ListView ls2 = new ListView(context);
// clear previous results in the LV
    ls2.setAdapter(null);        
    // populate
    ArrayList<Device> videos = new ArrayList<Device>();
    Device my_video;
        for (int i=0;i<05;i++) 
            my_video = new Device("video link","Video id");
        videos.add(my_video);
        
    CustomAdapter lvAdapter =  new CustomAdapter(context, videos);
    ls2.setAdapter(lvAdapter);
    ls2.setOnItemClickListener(new OnItemClickListener() 
    
        public void onItemClick(AdapterView<?> arg0, View arg1,int arg2, long arg3) 
        
            Toast.makeText(getBaseContext(), "You clicked on "+arg2, Toast.LENGTH_LONG).show();
        
    );
     setContentView(ls2);

这是适配器

class CustomAdapterView extends LinearLayout         
public CustomAdapterView(Context context, Device device) 

    super( context );   
    //container is a horizontal layer
     setOrientation(LinearLayout.HORIZONTAL);
    setPadding(0, 6, 0, 6);
    LinearLayout Mainview = new LinearLayout(context);
    LinearLayout.LayoutParams Cellparams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    Mainview.setLayoutParams(Cellparams);
    ImageView firstImageContainer = new ImageView(context);
    ImageView trackImage = new ImageView(context);
    ImageView VideoViewContainer = new ImageView(context);
    TextView firsttext= new TextView(context);
    firsttext.setText("Testing of app");
    firsttext.setTextColor(Color.RED);
    firstImageContainer.setBackgroundResource(R.drawable.wagon); 
    VideoViewContainer.setBackgroundResource(R.drawable.video); 
    RelativeLayout layout = new RelativeLayout(context);
     RelativeLayout.LayoutParams firstContainerParams = new RelativeLayout.LayoutParams(160, 80);
     layout.setLayoutParams(firstContainerParams);
     trackImage.setBackgroundResource(R.drawable.line);
     RelativeLayout.LayoutParams trackRules = new RelativeLayout.LayoutParams(755,5); 
     trackRules.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    RelativeLayout.LayoutParams firstImageContainerParams = new RelativeLayout.LayoutParams(140, 90);
     RelativeLayout.LayoutParams VideoViewContainerParams = new RelativeLayout.LayoutParams(70,60); 
     VideoViewContainerParams.addRule(RelativeLayout.CENTER_VERTICAL);
     VideoViewContainerParams.setMargins(5, 0, 0, 0);
     layout.addView(firstImageContainer, firstImageContainerParams);
     layout.addView(VideoViewContainer, VideoViewContainerParams);
     layout.addView(trackImage, trackRules);
     ImageView secondImageContainer = new ImageView(context);
    ImageView secondtrackImage = new ImageView(context);
    ImageView secondVideoViewContainer = new ImageView(context);
    secondImageContainer.setBackgroundResource(R.drawable.wagon); 
    secondVideoViewContainer.setBackgroundResource(R.drawable.video); 
    RelativeLayout secondLayout = new RelativeLayout(context);
     RelativeLayout.LayoutParams secondContainerParams = new RelativeLayout.LayoutParams(160, 80);
    secondLayout.setLayoutParams(firstContainerParams);
    secondtrackImage.setBackgroundResource(R.drawable.line);
     RelativeLayout.LayoutParams secondtrackRules = new RelativeLayout.LayoutParams(755,5); 
     trackRules.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    RelativeLayout.LayoutParams secondImageContainerParams = new RelativeLayout.LayoutParams(140, 90);
     RelativeLayout.LayoutParams secondVideoViewContainerParams = new RelativeLayout.LayoutParams(70,60); 
    secondVideoViewContainerParams.addRule(RelativeLayout.CENTER_VERTICAL);
    secondVideoViewContainerParams.setMargins(5, 0, 0, 0);
    secondLayout.addView(secondImageContainer, secondImageContainerParams);
    secondLayout.addView(secondVideoViewContainer, secondVideoViewContainerParams);
    secondLayout.addView(secondtrackImage, secondtrackRules);
     firstContainerParams.addRule(RelativeLayout.ALIGN_LEFT);
     secondImageContainerParams.addRule(RelativeLayout.ALIGN_RIGHT);
    Mainview.addView(layout,firstContainerParams);
    Mainview.addView(secondLayout,secondContainerParams);
    addView(Mainview);

     
  public class CustomAdapter extends BaseAdapter /*implements OnClickListener*/ 
public static final String LOG_TAG = "BI::CA";
private Context context;
private List<videoData> videolist;
public CustomAdapter(Context context, List<Device> videolist )  
    this.context = context;
    this.videolist = videolist;

public int getCount()                         
    return videolist.size();

public Object getItem(int position)      
    return videolist.get(position);

public long getItemId(int position)   
    return position;

public View getView(int position, View convertView, ViewGroup parent) 
 
    Device device = videolist.get(position);
    View v = new CustomAdapterView(this.context, device );  
    return v;

如果我的实施有误，请建议我一些指导。 图库在 API 17 中已弃用，我无法使用它。

是否可以通过使用 tableview 或 grid view 来创建这样的 Ui？

感谢任何帮助。

【问题讨论】：

为超级可爱的火车点赞：3

@Ascorbin 你有什么建议吗？或者是否可以通过使用 tableview 或 grid view 来实现这样的 Ui？

对不起，我太累了，无法绕着这个自动取款机转头。至于 OnClickListener：您始终可以将 OnClickListener 设置为列表项布局中的任何布局/视图。

@Ascorbin 很抱歉打扰您...

@Ascorbin 只是一个问题，我不明白为什么我的两个旅行车图像之间存在差距..它应该彼此靠近..当你有空闲时间时，你可以看看我的代码。

【参考方案1】：

最后我想通过在列表视图布局中使用包含标签来显示所有包含与其他设备上相同的内容。

<HorizontalScrollView
    android:id="@+id/horizontalScrollView1"
    android:layout_
    android:layout_ >
    <include android:id="@+id/train2" layout="@layout/train2" />
</HorizontalScrollView>

在火车上我有这个

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:orientation="horizontal">
    <include android:id="@+id/boogi1" layout="@layout/boogi" />
    <include android:id="@+id/boogi2" layout="@layout/boogi" />
     <include android:id="@+id/engine" layout="@layout/engine" />

并访问我使用的每个 Image-view 和 textview

 ImageView v1 = ((ImageView)vi.findViewById(R.id.train).findViewById(R.id.boogi1).findViewById(R.id.imageView1));

感谢您的支持。 只有一个问题是可以根据行的位置更改每一行的视图..

【讨论】：

这就是我和哈迪克试图告诉你的答案.. 但干得好你解决了它......

我们试图告诉你同样的事情，比如水平方向的一个父线性布局和其他使用其他布局的添加子级的... :)

【参考方案2】：

我认为您需要尝试自定义列表视图，，， 试试这个http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/。

【讨论】：

我正在使用自定义列表视图，请检查我在主要问题中的代码...我想知道如何在单行的单个视频上提供点击监听器。

您是否尝试在包含视频的布局上设置 OnClickListener？

@Ascorbin Cool 通过使用 layout.setonclick 我可以访问但我如何获取视频 ID（视频编号）.. 我尝试了 public void onClick(View v) // TODO 自动生成的方法存根Toast.makeText(context, "项目编号 1 - "+videolist.get(location)), Toast.LENGTH_SHORT).show();

@Ascorbin 单击项目时如何获取视频 ID 或项目 ID

创建Layout/View的时候，可以给它setTag，把内容放到tag里面。在 onClickListener onClick 中，您取回 View 和 getTag，然后从标记中获取该信息。只是一个想法。