1. 程式人生 > >關於gridview水平居中,平均佈局

關於gridview水平居中,平均佈局

首先是佈局

activity_main.xml

gridview的padding可以通過在外邊巢狀一層佈局新增 paddinng,例如:LinearLayout。

gridview的父控制元件也必須用match_parrent,  gridview必須用 match_parent,才能獲得它的實際寬高

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="#999999"
        android:orientation="horizontal" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linearLayout"
        android:orientation="horizontal"
        android:paddingLeft="20dp" 
        android:paddingRight="20dp" 
        android:paddingTop="25dp" 
        android:paddingBottom="25dp" 
        
        >

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#666666"
            android:numColumns="4"
            android:scrollbars="none" >
        </GridView>
    </LinearLayout>

</RelativeLayout>

griditem_app.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

2 GridViewAdapter.java

package com.example.gridviewtest;

import android.annotation.SuppressLint;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

public class GridViewAdapter extends BaseAdapter {
	private int itemWidth = 0;
	private int count = 3;
	
	@Override
	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}
	
	public void setItemHeight(int itemWidth) {
		this.itemWidth = itemWidth;
	}
	
	@Override
	public Object getItem(int position) {
		return null;
	}

	@Override
	public long getItemId(int position) {
		return 0;
	}

	@SuppressLint("InflateParams")
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		if (convertView == null) {
			LayoutInflater inflater = LayoutInflater.from(parent.getContext());
			convertView = inflater.inflate(R.layout.griditem_app, null);
		}
		//從外部傳進來計算好的item 高度進行設定
		convertView.setMinimumHeight(itemWidth);
		return convertView;
	}
}

MainActivity.java

package com.example.gridviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.GridView;

public class MainActivity extends Activity {
	private GridView gridview;
	private GridViewAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		gridview = (GridView) findViewById(R.id.gridView1);
		//獲得手機密度
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		final float denScale = (float) dm.densityDpi / (float) DisplayMetrics.DENSITY_DEFAULT;
		adapter = new GridViewAdapter();
		
		//在主執行緒繪圖渲染的時候計算gridview寬高
		gridview.post(new Runnable() {
			@Override
			public void run() {
				int width = gridview.getMeasuredWidth();
				int height = gridview.getMeasuredHeight();
				int itemWidth = (int) (denScale * 80);
				//計算一行能容納的item個數
				int count = width / itemWidth;
				//設定一行能放下的item個數
				gridview.setNumColumns(count);
				//計算gridview可見高度所能容納的item行數
				int rowCount = height / itemWidth;
				//設定item高度
				adapter.setItemHeight((int) ((float) height / (float) rowCount));
				adapter.setCount(count * rowCount-9);
				gridview.setAdapter(adapter);
			}
		});
	}
}

效果圖

 

相關推薦

關於gridview水平居中平均佈局

首先是佈局 activity_main.xml gridview的padding可以通過在外邊巢狀一層佈局新增 paddinng,例如:LinearLayout。 gridview的父控制元件也必須用match_parrent,  gridview必須用 match_par

css佈局實現單行文字水平居中多行文字靠左

單行文字居中,多行文字靠左,需要css佈局來實現,那麼就需要用到兩層元素,外面一層設定text-align:center;裡面一層為行元素,需要設定text-align:left;這樣有一行的時候因為裡面是行內元素,有多少內容就多寬,而外面一層設定了text-align:ce

CSS垂直水平居中display:flex佈局文字屬性的一些零碎

1. body的height不可少,如body{height:100%},否則子元素會不認,如果子元素的高直接以百分比寫的話,會不顯示。因為識別不出來。 寬度則不會,因為瀏覽器的寬度是固定的,高度會滾,不固定。 2. border-sizing其實是

CSS全面實現內容水平居中垂直居中

CSS全面實現內容水平居中,垂直居中 概述 水平居中(內容) 行級元素inline/inline-block 塊級元素(block) 一行多個塊級元素 垂直居中(內容) 行級元

【html+css】ul中li水平居中可以根據media查詢不同個數的li水平居中

通過給ul設定寬度width,來控制頁面顯示幾個li,你是水平居中顯示的,具體的間距通過li的margin來設定: <div class="navContent" id="newGoods"> <ul> <li>

5種方式實現CSS元素水平居中實用又簡單!

1.常規方法 - 定寬元素 html部分: <div class="container"> <div class="center"></div> </co

簡單理解css中的垂直居中水平居中即vertical-align和text-align屬性

                            前言:在很多情況下,我們要使用到內容的居中,這裡的居中包括了垂直居中和水平居中,下面來淺談一下              對於水平居中的屬性

實現盒子水平居中關於定位的問題

如何實現一個盒子水平居中 <!DOCTYPE html> <html> <head> <title>Demo4</title>

【知識整理】微信小程式-圖片在容器中等比縮放至垂直、水平居中並計算縮放後真實寬高

一.對於微信小程式頁面中的圖片,官方提供了image元件進行支援。根據官方文件,image元件用法如下: 例:圖片水平、垂直居中佈局程式碼如下: <view style="width:75

元素的水平居中垂直居中以及同時水平垂直居中方法

一.元素的水平居中: 1,文字的水平居中:text-align:cente <span style="color:#000000;">div.txtCenter{ text-align:center; border:1px solid red;

ExtJs佈局控制元件如何水平居中

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!                     如此即可,有圖有程式碼有j8:var formGridHead = Ext.create('Ext.form.Panel', {        id:

網頁常見佈局讓圖片在div中垂直居中水平居中

網頁常見佈局,圖片在div中垂直居中,水平居中  div{text-align:center;border:1px solid #000;width:500px;height:500px;vertical-align:middle;display:table-cell;}

水平居中與垂直居中以及對齊

代碼 布局 ott 水平居中 研究 背景圖 兼容性 vertical float 我以前一直都搞不清楚水平居中與垂直居中,更不用談什麽對齊,臨時抱佛腳,也找不到很好的答案,於是把網上的代碼研究了一番,總結一下經驗: 盒子水平居中:margin:0 auto 註意:在

div表格定高垂直居中水平居中

近日做專案,遇到一個難題:就是用div ul li 做表格時,要不就是水平居中不了,要不是垂直居中不來 垂直居中用vertical-align: middle;,但是浮動把它給無效化了 因為定高,所以用不了行高 如何解決垂直居中呢? 就是在li裡面加一個標籤 <!

margin: 0 auto; 元素水平居中佈局無效

失效原因: 1、沒有設定寬度 <div style="margin:0 auto;"></div> 看看上面的程式碼,根本沒有設定DIV的寬度,如何根據寬度自適應呢?新手比較容易忽略的問題! 2、沒宣告DOCTYPE ①DOCTYPE是docume

Android 輸出一個字串不管字型大小如何修改始終螢幕水平居中

本文指在沒有使用控制元件的的情況下 //獲取到螢幕的寬度 WindowManager wm = (WindowManager) getContext() .getSystemService(Conte

web居中佈局-水平居中

居中佈局 水平居中 要求:兩個容器巢狀,且寬度不一定,滿足小容器在大容器的水平居中位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

CSS佈局——讓一個div垂直居中8種實用的方法

1、height + line-height 這個是大家最熟悉的垂直居中的方式(之一),但是這種方法只能用於單行文字。 2、line-height + line-block 這種方法是將多行文本當成一行文字對待,即在文字的外層包一層div,然後將其設定為inline-b

layer彈出層自適應高度垂直水平居中

1、高度自適應:success: function(layero, index) {        layer.iframeAuto(index);    },2、layer垂直居中進入layer.js,增加幾行程式碼。具體如圖:

頁面水平居中佈局

個人的學習筆記 一.水平居中佈局(核心程式碼,四種方式) 1.display:flex + justify-content:center || margin:0 auto .parent寬是不固定的 類名為.child的div是display:block 預設與父元素同寬,父元素