1. 首页
  2. 问答
  3. 行内容独立可点击区域

行内容独立可点击区域

2012-10-28 138 views
2

注意：如果您因为遇到类似问题而来到这里，请确保您阅读并尝试提供的所有答案。看来在某些情况下，人们可能比另一个人工作得更好。所以做你自己的测试！行内容独立可点击区域

前言

我ListView的行布局像这样（这是剥夺了我的真实布局的版本，所以不要的东西像包裹在的LinearLayout等单要素评价 - 这只是为了说明问题 - 最终版本得到了更多的元素存在）：

enter image description here

XML文件如下以供参考，但我简短描述我想达到的目标：

  • 蓝框（图标）和“此处通常为长文本”TextView为行“真实”内容（item_main_container）。它可以是任何东西 - 它应该是无关紧要的。此图层内容不可点击。事实上（但我刚刚意识到），我应该显示“蓝色方块”被红色半覆盖，而下一层被绿色方框覆盖一半。
  • 红色和绿色框是视图我绑定行的OnCliclListeners（包裹在item_click_area_container） - 我只是希望用户能够点击行，不管item_main_container的内容真的是（所以这些红色/绿色是透明的应用程序）。 注意：它们在图像上设置为透明，因此您可以通过它看到item_main_content，但它仅用于演示目的。另请注意，红色和绿色代表单独的动作，我需要能够在item_click_area_container图层上具有更多元素，以便能够根据用户点击的位置处理更多操作。
  • 黄色区域（button_bar_container）保存用户可能想要点按的按钮。

所以基本上item_click_area_container覆盖item_main_container，但不button_bar_container，也就是上面item_click_area_container否则用户将无法通过点击任意按钮，它的。在角度来看，这将是：

enter image description here

布局轮廓如下：

enter image description here

问题

我无法正确地作出item_click_area_container伸展覆盖尽管我付出了努力，但它应该尽可能地保持整个item_main_container。由于"usually long text here"文字可以是任意长度，我不知道item_main_container的高度是多少。在下面的XML中有android:layout_height="100dp - 这个工作方式我看到所有的行元素，但是对于更长的文本item_click_area_container高度太小。但如果我用android:layout_height="fill_parent"替换它，那么整个item_click_area_container是不可见的，这打破了目的。

质询

  1. 为什么这是行不通的预期和/或如何解决呢？
  2. 有具有比使用像我item_click_area_container（但不包括基于OnTouchListener解决方案）的方法依赖于内容的点击区域没有更好的办法？

布局XML

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/item_container" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical"> 

    <RelativeLayout 
     android:layout_width="fill_parent" 
      android:layout_height="wrap_content"> 

     <LinearLayout 
      android:id="@+id/item_main_container" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"> 

      <ImageView 
       android:id="@+id/item_avatar" 
       android:layout_width="40dp" 
       android:layout_height="40dp" 
       android:background="#0000ff" 
       android:src="@drawable/icon_help"/> 

      <LinearLayout 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical"> 

       <TextView android:id="@+id/item_body" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:text="Usually long text here..." 
       android:textColor="#ffffff"/> 
      </LinearLayout> 

     </LinearLayout> 

     <LinearLayout 
       android:id="@+id/item_click_area_container" 
       android:layout_width="fill_parent" 
       android:layout_height="100dp"> 
      <LinearLayout 
       android:id="@+id/green_click" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:background="#7700ff00"> 
      </LinearLayout> 
      <LinearLayout 
       android:id="@+id/red_click" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:layout_weight="2" 
       android:background="#77ff0000"> 
      </LinearLayout> 
     </LinearLayout> 

    </RelativeLayout> 

    <LinearLayout 
     android:id="@+id/button_bar_container" 
     android:layout_width="fill_parent" 
     android:layout_height="50dp" 
     android:layout_marginTop="3dp" 
     android:background="#ffff00"> 
    </LinearLayout> 

</LinearLayout>

编辑＃1

我想我可以使用OnTouchListener，并在onTouch()检查event.getAction()，如果它是MotionEvent.ACTION_DOWN [R先阅读事件的X/Y并检查视图的边界。这可能会诀窍，但是，如果可能的话，我宁愿单独坚持使用OnClickListener。且不说它会有助于理解当前的罪魁祸首是什么，尤其是布局ADT

正确呈现

来源

2012-10-28 Marcin Orlowski

+1

我相信加入'OnClickListener'到'item_main_container'还将努力 – Thomas

+0

我第一次拒绝了这个提示，但休息后，我的文档再次潜伏，我认为它确实可以。你可以使用onTouchListener，检查'event.getAction（）'，如果它是'MotionEvent.ACTION_DOWN'，则读取事件的X/Y。这应该足够了，但是我需要保留tap中的tap区域代码，这是不是最完美的。但仍然可以是一个进步。需要调查。谢谢:) –

+0

正确的，应该是“button_bar_container”在覆盖看到。纠正。是的，我也认为它应该可以工作 - 但它不会，我不知道为什么。 –

回答

2

在这里你走这个布局将工作。简单的解决办法是到item_click_area_container的4个边对齐使用这些4行item_main_container相应的4个方面：

 android:layout_alignTop="@+id/item_main_container" 
     android:layout_alignBottom="@+id/item_main_container" 
     android:layout_alignLeft="@+id/item_main_container" 
     android:layout_alignRight="@+id/item_main_container"

这里是WRAP_CONTENT高度布局。没有更多的硬编码的大小（：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/item_container" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 

    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" > 

     <LinearLayout 
      android:id="@+id/item_main_container" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" > 

      <ImageView 
       android:id="@+id/item_avatar" 
       android:layout_width="40dp" 
       android:layout_height="40dp" 
       android:background="#0000ff" 
       android:src="@drawable/ic_action_search" /> 

      <LinearLayout 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" > 

       <TextView 
        android:id="@+id/item_body" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:text="Usually long text hasdkfn ash jsjkgh sjhgjk hasjkh ash fjk hasdjkh fkjash jkdf hjkasdh fjkhasjkg hjkasjkd hfjkash gsdgh kgh sdfh fjksah djkfasd jkg jsdf asgjf sg sd agfgas fjhasg f asdgf gjhsdg sdjhsdg fasdfjhs agjhfg adf asdg jh dvhsdvjhas gdh fv gsfjivhdfvjksfgjkdhjhixcgzvjk gdshg dfg v gvgdfgvjkshvjksdgvsdvere..." 
        android:textColor="#000" /> 
      </LinearLayout> 
     </LinearLayout> 

     <LinearLayout 
      android:layout_alignTop="@+id/item_main_container" 
      android:layout_alignBottom="@+id/item_main_container" 
      android:layout_alignLeft="@+id/item_main_container" 
      android:layout_alignRight="@+id/item_main_container" 
      android:id="@+id/item_click_area_container" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" > 

      <LinearLayout 
       android:id="@+id/green_click" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:layout_weight="1" 
       android:background="#7700ff00" > 
      </LinearLayout> 

      <LinearLayout 
       android:id="@+id/red_click" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:layout_weight="2" 
       android:background="#77ff0000" > 
      </LinearLayout> 
     </LinearLayout> 
    </RelativeLayout> 

    <LinearLayout 
     android:id="@+id/button_bar_container" 
     android:layout_width="fill_parent" 
     android:layout_height="50dp" 
     android:layout_marginTop="3dp" 
     android:background="#ffff00" > 
    </LinearLayout> 

</LinearLayout>

来源

2012-11-02 19:22:12

+1

解决这个问题的好办法，但在所有测试之后，我认为由于缺乏“锚定依赖性”，Marina的方法更加清晰。谢谢你的帮助。 –

+0

只是一个说明，希望这将有助于某人某天:) - 我设法创建另一个布局，导致我的问题中描述类似的麻烦，我无法解决使用FrameLayout方法**在Android 2.x **（它在更高的版本中工作），但幸运的是，谢里夫的技巧运行良好。所以我现在有点难过，我没能把恩惠分成一半...... –

+1

hehe @ WebnetMobile.com没问题。积极思考：现在我们有两种解决方案。 –

2

你可以尝试更换您的

<RelativeLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">...</RelativeLayout>

与

<FrameLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">...</FrameLayout>

然后把params的item_click_area_container至fill_parent/match_parent，使其成长为覆盖与item_main_container相同的区域。

如果您使用扩展LinearLayout用于处理你需要的红色和绿色的区域的动作类，你应该确定。

来源

2012-10-31 03:50:50

+0

我已经试过这个，但它并不像我希望的那样工作。我注意到与RelativeLayout缺乏正确拉伸相同的奇怪行为。无论如何都会尝试其他与FrameLayout的组合，所以谢谢你的提示。但我不确定它会适用于所有情况，因为与RelativeLayout相比，对齐选项有限 –

0

你可以做这样的事情。

在单独的元素在你的Android layout.xml：的onClick

<LinearLayout 
     android:id="@+id/red_click" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_weight="2" 
     android:background="#77ff0000"> 
    android:onClick="redAreaClicked" 
    </LinearLayout>

在你的java文件编写与下面的代码的方法redAreaClicked（）。

public void redAreaClicked(View v) { 
     RelativeLayout ParentRow = (RelativeLayout) v.getParent(); 
     final int position = mList.getPositionForView(ParentRow); 
     // more code here.. 
    }

这应该给你在列表中的位置。即行号。 但是，这个工作你必须在一个父母内部移动你所有的子视图（彩色视图，你的情况线性布局）。使用相对布局，我认为这是非常可行的。

否则，您可以使用view.getId（）和比较，以获得父视图。然后确定它在列表中的位置。

您可以对其他颜色的区域做同样的操作。

来源

2012-10-31 04:16:06 Aditya

+0

这不是一个解决方案。 “item_click_area_container”的内容可以附加到唯一的区域点击监听器。 –

相关问题

 相关问题