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

举报
黄啊码 发表于 2022/06/29 01:20:11 2022/06/29
【摘要】 这篇博客要实现之前没有实现过的效果，制作表格样式，这是小巫在工作中要实现的效果，花了我不少实现才把效果给做出来。界面设计是一个很大的学问，不知道怎么布局的话是无法设计出漂亮的界面，还有一些控件的属性的使用会出现什么样的效果也是需要去考虑的，ListView可以是用得最多的控件，在这里也是用ListView来实现表格的界面。 看看效果图...
这篇博客要实现之前没有实现过的效果，制作表格样式，这是小巫在工作中要实现的效果，花了我不少实现才把效果给做出来。界面设计是一个很大的学问，不知道怎么布局的话是无法设计出漂亮的界面，还有一些控件的属性的使用会出现什么样的效果也是需要去考虑的，ListView可以是用得最多的控件，在这里也是用ListView来实现表格的界面。

看看效果图：




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


布局文件：

activity_main.xml

[html] view plain
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="match_parent"  
  3.     android:layout_height="match_parent" >  
  4.   
  5.     <Button  
  6.         android:id="@+id/btnPopup"  
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content"  
  9.         android:layout_alignParentBottom="true"  
  10.         android:layout_centerHorizontal="true"  
  11.         android:background="@drawable/bg"  
  12.         android:layout_marginLeft="8dp"  
  13.         android:layout_marginRight="8dp"  
  14.         android:layout_marginBottom="8dp"  
  15.         android:textColor="@color/white"  
  16.         android:text="按下弹出表格" />  
  17.   
  18.     
  19.     <LinearLayout  
  20.         android:id="@+id/ll_popupLayout"  
  21.         android:layout_width="match_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:layout_alignParentBottom="true"  
  24.         android:visibility="gone" >  
  25.   
  26.         <include layout="@layout/business_list" />  
  27.     </LinearLayout>  
  28.   
  29. </RelativeLayout>  

/Demo1/res/layout/business_list_item.xml

[html] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="300dp"  
  4.     android:layout_height="wrap_content"  
  5.     android:layout_gravity="center_horizontal"  
  6.     android:orientation="horizontal" >  
  7.   
  8.     <TextView  
  9.         android:id="@+id/tv_business"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="40dp"  
  12.         android:layout_weight="1"  
  13.         android:gravity="center"  
  14.         android:text="@string/tv_business"  
  15.         android:textColor="#ff000000"  
  16.         android:textSize="15sp" />  
  17.   
  18.     <TextView  
  19.         android:id="@+id/tv_business_pay"  
  20.         android:layout_width="90dp"  
  21.         android:layout_height="40dp"  
  22.         android:layout_marginLeft="9dp"  
  23.         android:layout_marginRight="9dp"  
  24.         android:gravity="center"  
  25.         android:text="@string/tv_business_pay"  
  26.         android:textColor="#ff000000"  
  27.         android:textSize="15sp" />  
  28.   
  29. </LinearLayout>  

/Demo1/res/layout/business_list.xml

[html] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/ll_popupLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:background="#ffffff"  
  7.     android:orientation="vertical" >  
  8.   
  9.     <TextView  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_gravity="center_horizontal"  
  13.         android:layout_marginBottom="5dp"  
  14.         android:layout_marginTop="5dp"  
  15.         android:text="已开通查分业务列表"  
  16.         android:textColor="#ff000000"  
  17.         android:textSize="15sp" />  
  18.   
  19.     <FrameLayout  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="0dp"  
  22.         android:layout_weight="1" >  
  23.   
  24.         <LinearLayout  
  25.             android:layout_width="300dp"  
  26.             android:layout_height="wrap_content"  
  27.             android:layout_gravity="center_horizontal"  
  28.             android:background="@drawable/banner_bg"  
  29.             android:orientation="horizontal" >  
  30.   
  31.             <TextView  
  32.                 android:id="@+id/tv_business"  
  33.                 android:layout_width="wrap_content"  
  34.                 android:layout_height="40dp"  
  35.                 android:layout_weight="1"  
  36.                 android:gravity="center"  
  37.                 android:text="@string/tv_business"  
  38.                 android:textColor="#ff000000"  
  39.                 android:textSize="15sp" />  
  40.   
  41.             <TextView  
  42.                 android:id="@+id/tv_business_pay"  
  43.                 android:layout_width="90dp"  
  44.                 android:layout_height="40dp"  
  45.                 android:layout_marginLeft="9dp"  
  46.                 android:layout_marginRight="9dp"  
  47.                 android:gravity="center"  
  48.                 android:text="@string/tv_business_pay"  
  49.                 android:textColor="#ff000000"  
  50.                 android:textSize="15sp" />  
  51.         </LinearLayout>  
  52.   
  53.         <ListView  
  54.             android:id="@+id/lv_business"  
  55.             android:layout_width="300dp"  
  56.             android:layout_height="match_parent"  
  57.             android:layout_gravity="center_horizontal"  
  58.             android:layout_marginTop="40dp"  
  59.             android:background="@drawable/score_list_bg"  
  60.             android:cacheColorHint="@color/transparent"  
  61.             android:divider="@drawable/horizontal_line"  
  62.             android:listSelector="@color/transparent" />  
  63.   
  64.         <ImageView  
  65.             android:layout_width="wrap_content"  
  66.             android:layout_height="match_parent"  
  67.             android:layout_gravity="center_horizontal"  
  68.             android:layout_marginBottom="2dp"  
  69.             android:layout_marginLeft="50dp"  
  70.             android:layout_marginTop="2dp"  
  71.             android:background="@drawable/vertical_line" />  
  72.     </FrameLayout>  
  73.   
  74.     <Button  
  75.         android:id="@+id/btnBack"  
  76.         android:layout_width="80dp"  
  77.         android:layout_height="48dp"  
  78.         android:layout_gravity="center_horizontal"  
  79.         android:layout_marginBottom="5dp"  
  80.         android:layout_marginTop="5dp"  
  81.         android:background="@drawable/back_btn_bg"  
  82.         android:text="返回"  
  83.         android:textColor="#ffffff" />  
  84.   
  85. </LinearLayout>  

/Demo1/res/anim/score_business_query_enter.xml

[html] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.       
  4.     <translate  
  5.         android:fromYDelta="100%p"        
  6.         android:duration="600"  
  7.         />  
  8. </set>  

/Demo1/res/anim/score_business_query_exit.xml

[html] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
  3.        
  4.       <translate  
  5.           android:toYDelta="100%p"  
  6.           android:duration="600"     
  7.           />  
  8. </set>  



Acitivity

[java] view plain
  1. package com.wwj.demo1;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.List;  
  6. import java.util.Map;  
  7.   
  8. import android.app.Activity;  
  9. import android.os.Bundle;  
  10. import android.view.View;  
  11. import android.view.View.OnClickListener;  
  12. import android.view.animation.Animation;  
  13. import android.view.animation.AnimationUtils;  
  14. import android.widget.Button;  
  15. import android.widget.LinearLayout;  
  16. import android.widget.ListView;  
  17. import android.widget.SimpleAdapter;  
  18.   
  19. public class MainActivity extends Activity {  
  20.   
  21.     Button btnPopup;  
  22.     Button btnBack;  
  23.     ListView listView;  
  24.     LinearLayout ll_Popup;  
  25.   
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.activity_main);  
  30.   
  31.         btnPopup = (Button) findViewById(R.id.btnPopup);  
  32.   
  33.         ll_Popup = (LinearLayout) findViewById(R.id.ll_popupLayout);  
  34.         // 加载动画  
  35.         final Animation animation1 = AnimationUtils.loadAnimation(this,  
  36.                 R.anim.score_business_query_enter);  
  37.         final Animation animation2 = AnimationUtils.loadAnimation(this,  
  38.                 R.anim.score_business_query_exit);  
  39.         btnPopup.setOnClickListener(new OnClickListener() {  
  40.   
  41.             @Override  
  42.             public void onClick(View arg0) {  
  43.                 ll_Popup.setVisibility(View.VISIBLE);   // 显示布局  
  44.                 ll_Popup.startAnimation(animation1);    // 开始动画  
  45.   
  46.             }  
  47.         });  
  48.   
  49.         btnBack = (Button) findViewById(R.id.btnBack);  
  50.         btnBack.setOnClickListener(new OnClickListener() {  
  51.   
  52.             @Override  
  53.             public void onClick(View v) {  
  54.                 // TODO Auto-generated method stub  
  55.                 ll_Popup.setVisibility(View.GONE);   // 取出布局  
  56.                 ll_Popup.startAnimation(animation2); // 开始退出动画  
  57.             }  
  58.         });  
  59.   
  60.         setListAdapter();  
  61.   
  62.     }  
  63.   
  64.     /** 
  65.      * 填充列表 
  66.      */  
  67.     private void setListAdapter() {  
  68.   
  69.         List<Map<String, String>> data = new ArrayList<Map<String, String>>();  
  70.   
  71.         // 测试数据  
  72.         for (int i = 0; i < 10; i++) {  
  73.             Map<String, String> map = new HashMap<String, String>();  
  74.             map.put("tv_business", "武汉中考查询测试");  
  75.             map.put("tv_business_pay", "0元/次");  
  76.             data.add(map);  
  77.         }  
  78.   
  79.         listView = (ListView) findViewById(R.id.lv_business);  
  80.         SimpleAdapter adapter = new SimpleAdapter(this, data,  
  81.                 R.layout.business_list_item, new String[] { "tv_business",  
  82.                         "tv_business_pay" }, new int[] { R.id.tv_business,  
  83.                         R.id.tv_business_pay });  
  84.         listView.setAdapter(adapter);  
  85.     }  
  86. } 

文章来源: markwcm.blog.csdn.net，作者：黄啊码，版权归原作者所有，如需转载，请联系作者。

原文链接：markwcm.blog.csdn.net/article/details/50662337

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
ListView
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入