Android listview 制作表格样式+由下往上动画弹出效果实现

浏览数：218 / 时间：2015年06月11日

效果是这样的：点击按下弹出表格的按钮，会由下往上弹出右边的列表，按下返回按钮就由上往下退出界面。

布局文件：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/btnPopup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/bg"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:textColor="@color/white"
        android:text="按下弹出表格" />

  
    <LinearLayout
        android:id="@+id/ll_popupLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:visibility="gone" >

        <include layout="@layout/business_list" />
    </LinearLayout>

</RelativeLayout>

/Demo1/res/layout/business_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/tv_business"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/tv_business"
        android:textColor="#ff000000"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/tv_business_pay"
        android:layout_width="90dp"
        android:layout_height="40dp"
        android:layout_marginLeft="9dp"
        android:layout_marginRight="9dp"
        android:gravity="center"
        android:text="@string/tv_business_pay"
        android:textColor="#ff000000"
        android:textSize="15sp" />

</LinearLayout>

/Demo1/res/layout/business_list.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:text="已开通查分业务列表"
        android:textColor="#ff000000"
        android:textSize="15sp" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/banner_bg"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_business"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="@string/tv_business"
                android:textColor="#ff000000"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/tv_business_pay"
                android:layout_width="90dp"
                android:layout_height="40dp"
                android:layout_marginLeft="9dp"
                android:layout_marginRight="9dp"
                android:gravity="center"
                android:text="@string/tv_business_pay"
                android:textColor="#ff000000"
                android:textSize="15sp" />
        </LinearLayout>

        <ListView
            android:id="@+id/lv_business"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="40dp"
            android:background="@drawable/score_list_bg"
            android:cacheColorHint="@color/transparent"
            android:divider="@drawable/horizontal_line"
            android:listSelector="@color/transparent" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="50dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/vertical_line" />
    </FrameLayout>

    <Button
        android:id="@+id/btnBack"
        android:layout_width="80dp"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/back_btn_bg"
        android:text="返回"
        android:textColor="#ffffff" />

</LinearLayout>

动画文件：

/Demo1/res/anim/score_business_query_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    
    <translate
        android:fromYDelta="100%p"      
        android:duration="600"
        />
</set>

/Demo1/res/anim/score_business_query_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
     
      <translate
          android:toYDelta="100%p"
          android:duration="600"   
          />
</set>

Acitivity

package com.wwj.demo1;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

    Button btnPopup;
    Button btnBack;
    ListView listView;
    LinearLayout ll_Popup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnPopup = (Button) findViewById(R.id.btnPopup);

        ll_Popup = (LinearLayout) findViewById(R.id.ll_popupLayout);
        // 加载动画
        final Animation animation1 = AnimationUtils.loadAnimation(this,
                R.anim.score_business_query_enter);
        final Animation animation2 = AnimationUtils.loadAnimation(this,
                R.anim.score_business_query_exit);
        btnPopup.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                ll_Popup.setVisibility(View.VISIBLE);    // 显示布局
                ll_Popup.startAnimation(animation1);    // 开始动画

            }
        });

        btnBack = (Button) findViewById(R.id.btnBack);
        btnBack.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                ll_Popup.setVisibility(View.GONE);     // 取出布局
                ll_Popup.startAnimation(animation2); // 开始退出动画
            }
        });

        setListAdapter();

    }

    /**
     * 填充列表
     */
    private void setListAdapter() {

        List<Map<String, String>> data = new ArrayList<Map<String, String>>();

        // 测试数据
        for (int i = 0; i < 10; i++) {
            Map<String, String> map = new HashMap<String, String>();
            map.put("tv_business", "武汉中考查询测试");
            map.put("tv_business_pay", "0元/次");
            data.add(map);
        }

        listView = (ListView) findViewById(R.id.lv_business);
        SimpleAdapter adapter = new SimpleAdapter(this, data,
                R.layout.business_list_item, new String[] { "tv_business",
                        "tv_business_pay" }, new int[] { R.id.tv_business,
                        R.id.tv_business_pay });
        listView.setAdapter(adapter);
    }
}