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

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

2013年8月9日Android记录

    这篇博客要实现之前没有实现过的效果，制作表格样式，这是小巫在工作中要实现的效果，花了我不少实现才把效果给做出来。界面设计是一个很大的学问，不知道怎么布局的话是无法设计出漂亮的界面，还有一些控件的属性的使用会出现什么样的效果也是需要去考虑的，ListView可以是用得最多的控件，在这里也是用ListView来实现表格的界面。

看看效果图：

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

布局文件：

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);
	}
}

效果实现就这么简单！！！