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

2013年8月9日Android记录

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

看看效果图：

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

布局文件：

activity_main.xml

<RelativeLayout xmlns:android="schemas.android.com/apk/res/and…"

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" >

/Demo1/res/layout/business_list_item.xml

<LinearLayout xmlns:android="schemas.android.com/apk/res/and…"

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" />

/Demo1/res/layout/business_list.xml

<LinearLayout xmlns:android="schemas.android.com/apk/res/and…"

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" />

<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" />

<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" />

动画文件：

/Demo1/res/anim/score_business_query_enter.xml

<translate

android:fromYDelta="100%p"

android:duration="600"

/>

/Demo1/res/anim/score_business_query_exit.xml

<translate

android:toYDelta="100%p"

android:duration="600"

/>

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

// 加载动画