类似如表格-第一行第一列不滚动,其他行列可以上下水平滚动

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.table_layout);

TableRow.LayoutParams wrapWrapTableRowParams = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
int[] fixedColumnWidths = new int[]{20, 20, 20, 20, 20};
int[] scrollableColumnWidths = new int[]{20, 20, 20, 30, 30};
int fixedRowHeight = 50;
int fixedHeaderHeight = 60;

TableRow row = new TableRow(this);

TableLayout header = (TableLayout) findViewById(R.id.table_header);
row.setLayoutParams(wrapWrapTableRowParams);
row.setGravity(Gravity.CENTER);
row.setBackgroundColor(Color.YELLOW);
row.addView(makeTableRowWithText("col 1", fixedColumnWidths[0], fixedHeaderHeight));
row.addView(makeTableRowWithText("col 2", fixedColumnWidths[1], fixedHeaderHeight));
row.addView(makeTableRowWithText("col 3", fixedColumnWidths[2], fixedHeaderHeight));
row.addView(makeTableRowWithText("col 4", fixedColumnWidths[3], fixedHeaderHeight));
row.addView(makeTableRowWithText("col 5", fixedColumnWidths[4], fixedHeaderHeight));
header.addView(row);

TableLayout fixedColumn = (TableLayout) findViewById(R.id.fixed_column);

TableLayout scrollablePart = (TableLayout) findViewById(R.id.scrollable_part);
for(int i = 0; i < 10; i++) {
TextView fixedView = makeTableRowWithText("row number " + i, scrollableColumnWidths[0], fixedRowHeight);
fixedView.setBackgroundColor(Color.BLUE);
fixedColumn.addView(fixedView);
row = new TableRow(this);
row.setLayoutParams(wrapWrapTableRowParams);
row.setGravity(Gravity.CENTER);
row.setBackgroundColor(Color.WHITE);
row.addView(makeTableRowWithText("value 2", scrollableColumnWidths[1], fixedRowHeight));
row.addView(makeTableRowWithText("value 3", scrollableColumnWidths[2], fixedRowHeight));
row.addView(makeTableRowWithText("value 4", scrollableColumnWidths[3], fixedRowHeight));
row.addView(makeTableRowWithText("value 5", scrollableColumnWidths[4], fixedRowHeight));
scrollablePart.addView(row);
}

}



private TextView recyclableTextView;

public TextView makeTableRowWithText(String text, int widthInPercentOfScreenWidth, int fixedHeightInPixels) {
int screenWidth = getResources().getDisplayMetrics().widthPixels;
recyclableTextView = new TextView(this);
recyclableTextView.setText(text);
recyclableTextView.setTextColor(Color.BLACK);
recyclableTextView.setTextSize(20);
recyclableTextView.setWidth(widthInPercentOfScreenWidth * screenWidth / 100);
recyclableTextView.setHeight(fixedHeightInPixels);
return recyclableTextView;

}

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:id="@+id/fillable_area">
<TableLayout
android:id="@+id/table_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:id="@+id/fillable_area">
<TableLayout
android:id="@+id/fixed_column"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout
android:id="@+id/scrollable_part"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
</LinearLayout>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现 element-ui 中的表格固定第一行标题,内容滚动,可以使用 el-table 组件的 slot-scope 和 el-scrollbar 组件的滚动条功能。 以下是实现步骤: 1. 在 template 中使用 el-table 组件,并设置表格样式和高度。 ``` <el-table :data="tableData" style="width: 100%" height="300"> <!-- 表格列定义 --> </el-table> ``` 2. 在表格中使用 slot-scope="scope",获取表格数据和表格列信息。 ``` <el-table :data="tableData" style="width: 100%" height="300"> <template slot-scope="scope"> <tr> <th v-for="item in scope.columns" :key="item.label"> {{ item.label }} </th> </tr> <tr v-for="item in scope.data" :key="item.name"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.address }}</td> <!-- 其他表格列定义 --> </tr> </template> </el-table> ``` 3. 在表格外部包裹一个带有滚动条的容器,例如 el-scrollbar 组件。 ``` <el-scrollbar style="height: 300px;"> <el-table :data="tableData" style="width: 100%" height="300"> <!-- 表格列定义 --> </el-table> </el-scrollbar> ``` 4. 在表格容器上设置 overflow-y: auto,使其在容器高度内部滚动。 ``` .el-table__body-wrapper { overflow-y: auto; } ``` 5. 在表格容器上设置 max-height,使其高度不超过容器高度,从而触发滚动条。 ``` .el-table__body-wrapper { max-height: 300px; overflow-y: auto; } ``` 6. 在表格头部上方添加一个固定表格,显示表格列标题。 ``` <el-scrollbar style="height: 300px;"> <el-table :data="tableData" style="width: 100%" height="300"> <template slot-scope="scope"> <tr> <th v-for="item in scope.columns" :key="item.label"> {{ item.label }} </th> </tr> <tr v-for="item in scope.data" :key="item.name"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.address }}</td> <!-- 其他表格列定义 --> </tr> </template> <template slot="header"> <tr> <th v-for="item in tableData[0]" :key="item">{{ item }}</th> </tr> </template> </el-table> </el-scrollbar> ``` 这样,就可以实现 element-ui 中的表格固定第一行标题,内容滚动了。当表格数据较多时,表格头部的列标题会固定在页面顶部,表格内容可以通过滚动滚动。同时,滚动条会出现在表格容器中,用户可以通过滚动滚动表格内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值