表格布局TableLayout ——实现商品浏览页面

最新推荐文章于 2022-07-24 15:01:46 发布
最新推荐文章于 2022-07-24 15:01:46 发布
阅读量963 收藏 1
点赞数
分类专栏： android布局

               表格布局TableLayout是Android中比较常用的一个布局控件，既然是表格，肯定有行和列，TableLayout中的行有TableRow组成，列根据每行控件的数量来确定

假如第一行有3个控件，第2行有4个控件，那么这个表格的列数就去最大列数，即4列。

               1.属性介绍

                表格有以下几个重要属性

                   android:shrinkColumns="2" 自动收缩的列，多个列用逗号隔开，自动收缩的意思是如果该列的内容超出了表格列的宽度，自动向下显示

                  android:stretchColumns="1" 自动伸缩列，多个列用逗号隔开，如果表格中所有列，都没有占满表格宽度，该列自动伸缩。

                   android:collapseColumns   隐藏指定的列，多个列用逗号隔开

                  android:layout_column="1" 用来设置该表格中控件所在的列数，

                 android:layout_span  用来设置表格中控件所占的列数

                     

[html] view plain copy 在CODE上查看代码片派生到我的代码片 

  1. <span style="font-size:14px;">    <?xml version="1.0" encoding="utf-8"?>  
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"   
        android:shrinkColumns="2"  
        android:stretchColumns="1"  
        >  
      
        <TableRow  
            android:id="@+id/tableRow1"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" >  
      
            <TextView  
                android:id="@+id/textView1"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="标签1"   
                android:background="#FF82AB"  
                />  
      
            <TextView  
                android:id="@+id/textView2"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="标签2"   
                  android:background="#EE6A50"  
                />  
      
            <TextView  
                android:id="@+id/textView3"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="我是自动伸缩列，内容过多，自动向下伸缩"   
                  android:background="#B3EE3A"  
                />  
      
        </TableRow>  
          
         <TableRow  
            android:id="@+id/tableRow1"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content" >  
      
            <TextView  
                android:id="@+id/textView4"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="标签4"   
                android:background="#FF82AB"  
                />  
      
            <TextView  
                android:id="@+id/textView5"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="自动伸张"   
                  android:background="#EE6A50"  
                />  
      
            <TextView  
                android:id="@+id/textView6"  
                android:layout_width="wrap_content"  
                android:layout_height="wrap_content"  
                android:text="标签6"   
                  android:background="#B3EE3A"  
                />  
      
        </TableRow>  
      
    </TableLayout>  </span>

              2.商品列表示例

                  下面我们用TableLayout来完成一个商品列表的布局

              

[html] view plain copy 在CODE上查看代码片派生到我的代码片 
<span style="font-size:14px;">派生到我的代码片

    <?xml version="1.0" encoding="utf-8"?>  
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" >  
      
        <TableRow  
            android:id="@+id/tableRow1"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content" >  
              
            <TableLayout   
                   android:layout_width="match_parent"  
        android:layout_height="match_parent"  
                >  
                  
                <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"  >  
                       <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />  
                </TableRow>  
                </TableLayout>  
                  
                
            <TableLayout   
                   android:layout_width="match_parent"  
        android:layout_height="match_parent"  
                >  
                  
                <TableRow  
                     android:layout_width="fill_parent"  
            android:layout_height="wrap_content"   
                    >  
                         
                      
                       <TableLayout  android:layout_width="match_parent"   android:layout_height="fill_parent"   >  
                  
               <TableRow android:layout_height="match_parent" >     
                    <TextView  
                        android:layout_width="wrap_content"  
                         android:layout_height="wrap_content"  
                       android:text="商品名称:IPAD AIR"   
                       android:layout_margin="10dp"  
                       />  
               </TableRow>   
               <TableRow  android:layout_height="match_parent"  >  <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="商品价格:$99"   
              android:layout_margin="10dp"  
             />    
             </TableRow>   
               
                 <TableRow  android:layout_height="match_parent" >    
                       <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="商品颜色:白色"   
              android:layout_margin="10dp"  
             />  
                 </TableRow>   
                    
                           </TableLayout>  
                      
                      
                      
                </TableRow>  
                  
                </TableLayout>  
              
              
        </TableRow>  
          
         <TableRow  
            android:id="@+id/tableRow2"  
            android:layout_width="fill_parent"  
            android:layout_height="5dp"   
            android:background="#EEE8CD"  
            >  
      
           <TextView  
                        android:layout_width="fill_parent"  
                         android:layout_height="3dp"  
                        android:background="#EEE8CD"  
                       />  
              
        </TableRow>  
      
          <TableRow  
            android:id="@+id/tableRow1"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content" >  
              
            <TableLayout   
                   android:layout_width="match_parent"  
        android:layout_height="match_parent"  
                >  
                  
                <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"  >  
                       <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />  
                </TableRow>  
                </TableLayout>  
                  
                
            <TableLayout   
                   android:layout_width="match_parent"  
        android:layout_height="match_parent"  
                >  
                  
                <TableRow  
                     android:layout_width="fill_parent"  
            android:layout_height="wrap_content"   
                    >  
                         
                      
                       <TableLayout  android:layout_width="match_parent"   android:layout_height="fill_parent"   >  
                  
               <TableRow android:layout_height="match_parent" >     
                    <TextView  
                        android:layout_width="wrap_content"  
                         android:layout_height="wrap_content"  
                       android:text="商品名称:IPAD AIR"   
                       android:layout_margin="10dp"  
                       />  
               </TableRow>   
               <TableRow  android:layout_height="match_parent"  >  <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="商品价格:$99"   
              android:layout_margin="10dp"  
             />    
             </TableRow>   
               
                 <TableRow  android:layout_height="match_parent" >    
                       <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="商品颜色:白色"   
              android:layout_margin="10dp"  
             />  
                 </TableRow>   
                    
                           </TableLayout>  
                      
                      
                      
                </TableRow>  
                  
                </TableLayout>  
              
              
        </TableRow>  
          
         <TableRow  
            android:id="@+id/tableRow2"  
            android:layout_width="fill_parent"  
            android:layout_height="5dp"   
            android:background="#EEE8CD"  
            >  
      
           <TextView  
                        android:layout_width="fill_parent"  
                         android:layout_height="3dp"  
                        android:background="#EEE8CD"  
                       />  
              
        </TableRow>  
          
          <TableRow  
            android:id="@+id/tableRow1"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content" >  
              
            <TableLayout   
                   android:layout_width="match_parent"  
        android:layout_height="match_parent"  
                >  
                  
                <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"  >  
                       <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />  
                </TableRow>  
                </TableLayout>  
                  
                
            <TableLayout   
                   android:layout_width="match_parent"  
        android:layout_height="match_parent"  
                >  
                  
                <TableRow  
                     android:layout_width="fill_parent"  
            android:layout_height="wrap_content"   
                    >  
                         
                      
                       <TableLayout  android:layout_width="match_parent"   android:layout_height="fill_parent"   >  
                  
               <TableRow android:layout_height="match_parent" >     
                    <TextView  
                        android:layout_width="wrap_content"  
                         android:layout_height="wrap_content"  
                       android:text="商品名称:IPAD AIR"   
                       android:layout_margin="10dp"  
                       />  
               </TableRow>   
               <TableRow  android:layout_height="match_parent"  >  <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="商品价格:$99"   
              android:layout_margin="10dp"  
             />    
             </TableRow>   
               
                 <TableRow  android:layout_height="match_parent" >    
                       <TextView  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="商品颜色:白色"   
              android:layout_margin="10dp"  
             />  
                 </TableRow>   
                    
                           </TableLayout>  
                      
                </TableRow>  
                  
                </TableLayout>  
              
              
        </TableRow>  
          
         <TableRow  
            android:id="@+id/tableRow2"  
            android:layout_width="fill_parent"  
            android:layout_height="5dp"   
            android:background="#EEE8CD"  
            >  
      
           <TextView  
                        android:layout_width="fill_parent"  
                         android:layout_height="3dp"  
                        android:background="#EEE8CD"  
                       />  
              
        </TableRow>  
          
      
    </TableLayout>  </span>
Ivan张
关注
专栏目录
界面布局之表格布局TableLayout+TableRow(代码)
03-15
界面布局之表格布局TableLayout+TableRow(代码).
仿淘宝商品浏览界面
04-11
用手机淘宝浏览商品详情时，商品图片是放在后面的，在第一个ScrollView滚动到最底下时会有提示，继续拖动才能浏览图片。仿照这个效果写一个出来并不难，只要定义一个Layout管理两个ScrollView就行了，当第一个ScrollView滑到底部时，再次向上滑动进入第二个ScrollView.
HTML中table标签和form表单的应用
m0_57110782的博客
08-04 311
<!-- *@Author:yourname *@Date:2021-08-0417:26:18 *@LastEditTime:2021-08-0419:59:23 *@LastEditors:PleasesetLastEditors *@Description:InUserSettingsEdit *@FilePath:\briupf:\Web课后练习成果\HTML\htmlDay03.html --> <!DOCTYP...
android自定义表格布局
qndroid的专栏
10-31 1940
最近由于项目需要，要求将服务器返回来的Json数组以表格的形式去存放，取代之前的ListView,苦想了一天后，又借鉴了一些大神们的代码，加上自己的一些理解封闭了一个纯代码表格类，先看一对一表格效果图： 完全与网站上的表格效果是一致的，下面再看一再一对多表格的效果图： ． 话不多说：将自己封装好的表格类代码贴上： package com.micen.buyers.view.prod
Android仿淘宝切换商品列表布局效果的示例代码
08-29
主要介绍了Android仿淘宝切换商品列表布局效果的示例代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android Studio实现简易计算器（表格布局TableLayout）
08-19
Android Studio 实现简易计算器（表格布局 TableLayout） Android Studio 是一个功能强大且流行的集成开发环境（IDE），用于开发 Android 应用程序。今天，我们将详细介绍如何使用 Android Studio 实现一个简易...
Android 表格布局TableLayout示例详解
09-01
总结来说，Android的TableLayout布局提供了一种灵活的方式来构建二维的UI结构，通过调整不同的属性，可以实现各种复杂的表格布局效果。通过理解并熟练运用这些属性，开发者可以更好地满足用户界面的需求，创建出清晰...
Android布局之表格布局TableLayout详解
08-29
Android 布局之表格布局 TableLayout 详解 Android 中的表格布局 TableLayout 是一种常用的布局方式，它可以按照行列的形式管理子控件，每一行为一个 TableRow 对象。下面将对 TableLayout 的用法和属性进行详细的...
php主页显示商品预览图代码,实现ecshop提交订单页面显示商品缩略图的方法
weixin_42502811的博客
03-17 291
ECSHOP系统，在购物车页面，是可以显示商品缩略图的，但是ECSHOP在订单提交的页面却不支持显示缩略图，好在ECSHOP是开源的，通过以下方法可以实现：(修改前备份文件，以免出错无法挽回)第一步、打开 include/lib_order.php 文件，查找以下代码：/***取得购物车商品*@paramint$type类型：默认普通商品*@returnarray...
商城商品列表展示的完整代码
02-21
、初始化表格请求的url：/item/list 2、Datagrid默认请求参数： 1、page：当前的页码，从1开始。 2、rows：每页显示的记录数。 3、响应的数据：json数据。EasyUIDataGridResult
JSP页面设计表格
08-11
Web界面开发的，JSP中利用HTML语言实现美观大方的表格的设计，
JSP页面布局
07-26
以模块的方式分割页面为上中（中分为左右）下,以及常见的登录框
简单的JSP页面布局
12-03
JSP页面布局，以及常见的页面嵌套方式,使用Frame 以及Include组成
Android实现商品展示效果
08-30
主要为大家详细介绍了Android实现商品展示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
高仿京东商品列表布局切换
04-27
高仿淘宝京东商品列表布局切换；使用RecyclerView实现商品列表布局切换效果；
前端：综合例题详细解说（含源代码）,导航栏，商品展示页面。
fuyuo的博客
07-24 2085
详细的代码写商品页面以及导航栏的书写
这是一份数据量达41.7万开源表格数据集
AI科技大本营
03-31 2590
点击上方↑↑↑蓝字关注我们~「2019 Python开发者日」7折优惠最后1天，请扫码咨询 ↑↑↑本文转载自微软研究院AI头条（ID:MSRAsia）近年来，自然语言处理...
Jsp Layout 布局页
weixin_30715523的博客
10-19 265
本文章仅用于知识记录 /WEB-INF/tags/layout.tag 1 <%@ tag language="java" pageEncoding="UTF-8" body-content="empty"%> 2 <%@ attribute name="file" type="java.lang.String" required="true" %> ...
表格布局页面
桑海田
10-21 1444
本文用到了两个表格，一个是大表格，一个是内嵌在大表格里面的成绩排名表格用绝对定位相对比较好控制布局！效果图：.html<!doctype html> <html> <head> <meta charset="gb2312"> <title>表格布局</title> <link rel="stylesheet" href="style.css" type="text/css"></head><body
Android界面布局：表格布局TableLayout详解
"这篇文档主要介绍了Android界面布局中的一种——表格布局（TableLayout），以及相关的线性布局、绝对布局、框架布局、相对布局和网格布局。表格布局允许开发者以行列的方式来组织视图，类似于HTML中的表格。而线性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值