Android 点击显示详情UI

在需求文案中有时候需要显示如下信息
1.点击某行显示详情ui，如下图
2.填充某行左由两边title信息.
3.箭头的动画.
通过上面需求定义了一个custom UIView
Demo code github传送点:[https://github.com/wongstar/android-PullView](https://github.com/wongstar/android-PullView)


如图一所需要实现的需求。
图一


下面简单的分析所需要的知识点：
1.在attrs.xml中定义view 的style中属性，这些属性可以自定义如下：
<declare-styleable name="pullup">
        <attr name="leftText" format="string" />
        <attr name="leftTextSize" format="dimension" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftTextVisible" format="integer" />
        <attr name="topBackground" format="integer" />
        <attr name="rightText" format="string" />
        <attr name="rightTextSize" format="dimension" />
        <attr name="rightTextColor" format="color" />
        <attr name="rightTextVisible" format="integer" />
        <attr name="moreVisible" format="integer"></attr>
        <attr name="tipVisible" format="integer"></attr>
        <attr name="tipText" format="string"></attr>
        <attr name="isMoreView" format="integer"></attr>
        <attr name="haveChildView" format="integer"></attr>
 </declare-styleable>


如上述代码定义了当前行的左边text,textsize,textcolor ，当前行的右边的text,textsize,textcolor,visible,定义了是否存在moreview参数
format对应的是name相关属性的类别，具体的format对应的类别列表如下：
https://developer.android.com/reference/android/R.attr.html




在xml中调用attr中自定义的属性
xmlns:pullup="http://schemas.android.com/apk/res-auto"
<pull.star.com.pullview.PullUpView
        android:id="@+id/zero"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:background="@color/white"
        android:minHeight="@dimen/setting_column_size"
        pullup:leftText="wight"
        pullup:leftTextSize="20sp"
        pullup:rightTextVisible="0"
        pullup:rightText="80"
        pullup:isMoreView="1"
        pullup:rightTextSize="20sp">


要让xml中pullup的属性能够找到，需要在xml中声明xmlns:pullup的命名空间，这样后面的xml就能找到对应的attr中自定义的pullup属性，这一部非常重要，否则不能编译成功。


那在UIView中如何调用获取到对应的属性呢？


TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.pullup);
CharSequence leftText = a.getText(R.styleable.pullup_leftText);
通过调用TypedArray就能获取到对应的参数，比如上面的pullup_leftText.
TypedArray是android framework层通过解析xml获取到xml中属性值.通过context来获取到。具体可以参考LayoutInflater 源码




再分析下PullUpView的构造。
public class PullUpView extends LinearLayout implements View.OnClickListener






1.该view是继承LinearLayout,这样你的detailView就可以直接add进去
2.设置当前LinearLayout的Orientation是VERTICAL
3.该view的第一个view是LayoutInflater一个FrameLayout具体如下：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:id="@+id/flTop"
    android:focusable="true"
    android:clickable="true"
    android:background="@drawable/selector_list_view"
    android:minHeight="@dimen/setting_column_size">
        <TextView
            android:id="@+id/tvLeft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|left"
            android:layout_marginLeft="15dp"
            android:textColor="@color/black"
            android:textSize="@dimen/card_item_text_size" />
        <TextView
            android:visibility="gone"
            android:id="@+id/tvTip"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="20dp"
            android:layout_gravity="center_vertical|left"
            android:textSize="10sp"
            android:textColor="@color/share_title_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    <RelativeLayout
        android:id="@+id/rlPullUp"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical|right"
        android:layout_marginRight="10dp"
        android:clickable="true">


        <ImageView


            android:id="@+id/ivPullUp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"></ImageView>
    </RelativeLayout>
    <TextView
        android:id="@+id/tvRight"
        android:textColor="@color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|right"
        android:layout_marginRight="60dp"
        android:textSize="@dimen/card_item_text_size" />
</FrameLayout>


通过LayoutInflater 把framelayout xml inflater到该LinearLayout中
LayoutInflater inflater = LayoutInflater.from(context);
rlTop = (FrameLayout) inflater.inflate(R.layout.menu_item_top_view,
null);
addView(rlTop, 0);
setOrientation(VERTICAL);//




通过上述的方式，把framelayout add到LinearLayout中




最后就是show Detail view 和hideDetailView,注意点是：Child的index是从1开始计算：
private void showViews() {
for (int i = 1; i < getChildCount(); i++) {
getChildAt(i).setVisibility(View.VISIBLE);
}
}
private void hideViews() {
        for (int i = 1; i < getChildCount(); i++) {
getChildAt(i).setVisibility(View.GONE);
}
}


得出来的整体UI如下：