1. 程式人生 > >GridView實現類似listview中divider分割線

GridView實現類似listview中divider分割線

今天遇到一個需求,那就是GridView要以PopupWindow的方式展示資料,並且需要給gridview新增分割線。

我們知道GridView是沒有想ListView那樣的divider分割線的,所以我們需要自己畫分割線。

一般來說我們是使用讓背景色透出來形成分割線或者給每一項Item描邊的方式產生分割線,當然,這在資料剛好填完整的時候是很好用的。

比如說,在這種情況下,看起來會很完美(我現在給的邊是4dp,為了看起來更直觀,現實中可能用不到這麼大的邊,為了更標準,我GridView本身再padding了4dp,所以現在的每條邊有8dp,):


但是,在資料填不滿的情況下,就會出現這樣的問題。


或者我不要GridView的描邊,那麼現實是這樣的。


會很明顯的看出來,總會有一些邊要比中間的邊要細一半。總是達不到我要的效果。我需要圖三那樣的效果(沒有Item的地方現實底部的檢視),但是又想要每條邊都一樣粗細。

會出現中間的部分線條會比邊沿的部分線條寬。那是因為中間的線條是上下兩個item或者左右兩個item的邊拼起來的,也就是有8dp那麼寬,那麼我們怎麼讓它變成4dp呢?

現在說一下我的實現方式,靈感來源於http://stackoverflow.com/questions/7132030/android-gridview-draw-dividers

在裡面的第一條回覆中,我看到引數能夠輸入負數,也就是會隱藏一部分,下面來做一下實驗。

第一步,同樣的,我使每一項item四邊都有一條深色的邊顯示出來。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#494b4e"
    android:padding="4dp"
    android:gravity="center_horizontal"
    android:orientation="vertical" >


    <TextView
        android:id="@+id/tv_job"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#696c71"
        android:paddingBottom="@dimen/dim35"
        android:gravity="center"
        android:paddingTop="@dimen/dim35"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="@dimen/txt32" />


</LinearLayout>

第二部,我想辦法把拼接的邊從兩倍寬變成一倍寬。有兩個屬性是很好用的,那就是android:horizontalSpacing(水平邊距)和android:verticalSpacing(垂直邊距);

既然這兩個屬效能設定0包括0以上的dp值,為什麼我不能設定0一下的dp值呢。

我試了一下(使用8dp,是效果更明顯),發現可行,並且很明顯的可以看出來,下邊的item會覆蓋住上邊的item的一部分,左右的item會覆蓋左邊的item的一部分。



<GridView
                    android:id="@+id/gv_second"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:horizontalSpacing="-8dp"
                    android:numColumns="3"
                    android:scrollbars="none"
                    android:verticalSpacing="-8dp" />


那麼,我讓他剛好覆蓋掉上一個item的邊和左右的item的邊會是什麼效果呢?發現結果是很漂亮的。

 <GridView
                    android:id="@+id/gv_second"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:horizontalSpacing="-4dp"
                    android:numColumns="3"
                    android:scrollbars="none"
                    android:verticalSpacing="-4dp" />

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#494b4e"
    android:padding="4dp"
    android:gravity="center_horizontal"
    android:orientation="vertical" >


    <TextView
        android:id="@+id/tv_job"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#696c71"
        android:paddingBottom="@dimen/dim35"
        android:gravity="center"
        android:paddingTop="@dimen/dim35"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textSize="@dimen/txt32" />


</LinearLayout>







相關推薦

GridView實現類似listviewdivider割線

今天遇到一個需求,那就是GridView要以PopupWindow的方式展示資料,並且需要給gridview新增分割線。 我們知道GridView是沒有想ListView那樣的divider分割線的,所以我們需要自己畫分割線。 一般來說我們是使用讓背景色透出來形成分割線或者

自定義ListView割線

ListView中每個Item項之間都有分割線,設定android:footerDividersEnabled表示是否顯示分割線,此屬性預設為true。 1.不顯示分割線只要在ListView控制元件中新增android:footerDividersEnabled="fal

Android割線GridView-LineGridView

在Android專案開發中,有時候需要帶分割線的GridView,一般情況下是做類似九宮格的功能。有時候可以直接留出邊距就可以,底部背景就可以當做分割線了。但要是設計比較刁,非得要分割線跟背景顏色不同呢,那就用LineGridView吧。 public c

RecyclerView利用GridLayoutManager實現item四周都帶有割線效果(更正版!!!)

今天,花了很長的時間才實現瞭如題的效果,回想一下,實現起來確實不難,只怪當時做的時候思路不清晰,沒想好就動手了,這是病,得改!好了,不多說,實現工程中主要參考了鴻洋部落格中Android RecyclerView 使用完全解析 體驗藝術般的控制元件Divider

如何用Elasticsearch實現類似SQL的IN查詢實例

red ast last .cn lte style sea ges logs 我想實現類似如下sql語句的效果: select * from table1 where rw_id in (‘7a482589-e52e-0887-4dd5-5821aab77eea‘,‘c

SQL Server 實現類似C# PadLeft功能

left ret cnblogs alt div use sql eat pan 1 USE [Test] 2 GO 3 SET ANSI_NULLS ON 4 GO 5 SET QUOTED_IDENTIFIER ON 6 GO 7 --@column 表

react 實現類似vue的<keep-alive>的功能,並解決antd-mobile切換回來時的空白

在移動端的spa頁面中,只要使用到了路由就很有必要使用到狀態儲存的功能,這樣才能保證在頁面進行切換的時候,讓使用者可以看到剛才滑動的地方,讓使用者的體驗更加友好。這兒我找到了react-router-cache-route這個外掛,使用方法直接參考文件。 在使用了這個外掛以後,結合著antd-mob

全域性設定割線,整個應用割線的地方統一設定

通過尚矽谷視訊學習,在此感謝尚矽谷的全體老師以及尚矽谷平臺 第一步:首先建立顯示的分割線樣式 在drawable資料夾下,建立自己喜歡的風格的分割線檔案listdivider_bg.xml <?xml version="1.0" encoding="utf-8"?> &l

利用OpenCV findNonZero函式實現類似matlabfind函式的功能

OpenCV和matlab都提供了強大的矩陣處理功能。但matlab也有一些功能是openCV不具備的。如find函式,可以找出矩陣中某個特定值的行列號。本文介紹一種方法,可以模擬find函式的功能。 // OpenCVFind.cpp : 定義控制檯應用程式的入口點。 /

opencv實現類似MATLABfind功能的方法

在網上找類似find功能的C++實現時,發現一個網站的提供了類似解決方法,網址如下: http://stackoverflow.com/questions/10597107/opencv-function-similar-to-matlabs-find 嘗試了其中的第二種,

ORACLE實現類似SQLSERVERIDENTITY(1,1)序號自增的功能

最近在做一個把SQL SERVER中的資料庫的表同步到ORACLE 中,排除解決了了一系列如型別不匹配等產生的錯誤後,終於將資料同步過來了,可是又發現了一個新問題:SQL SERVER中源表的ID是通過IDENTITY(1,1)自增的,ORACLE中的表示通過sequen

weex開發實戰(5)--利用wxc-tabbar實現類似安卓fragment頁效果

wxc-tabbar是官方提供的一個tabbar擴充套件,需要安裝weex-components npm install weex-components --save 注意在安卓專案上,src最好寫成 “file://assets/yourpath”<templat

如何在多個LinearLayout新增割線

<TextView android:layout_width="match_parent" android:layout_height="1dp" android:background="#000" />

IOS7 8tableview割線缺少15畫素

IOS8 設定TableView Separatorinset 分割線從邊框頂端開始 在ios8上 [TableViewsetSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用經過測試加入下面方法 在ios7 8上都可以正常工作-(

AndroidListView實現圖文並列並且自定義割線(完善仿微信APP)

昨天的(今天凌晨)的博文《Android中Fragment和ViewPager那點事兒》中,我們通過使用Fragment和ViewPager模仿實現了微信的佈局框架。今天我們來通過使用ListView實現其中聯絡人一欄的基本檢視,效果如下: 要實現上圖的效果,我們要用到兩

android開發之&使用ViewPager加gridView實現選單按鈕頁滑動(類似QQ表情選擇翻頁效果)

剛做的專案中要用到選單分頁,以前沒做過,仔細想了想,既然是分頁,肯定就少不了ViewPager,大家都知道gridView可以實現九宮格,剛好滿足我們的需求,我做的是gridview單行顯示,大家如果需要向QQ表情一樣多行顯示,直接修改資料來源就可以。 好了,上程式碼 pu

Android控制元件GridView實現割線

大家都知道Android ListView設定分割線很簡單,設定如下兩個屬性即可:     android:divider     android:dividerHeight GirdView預設是沒有網格線的,那麼該如何設定呢? 現介紹兩種方法: 第一、設定垂直、橫向間距

GridView 繪製割線的簡單實現

public class LineGridView extends GridView{     public LineGridView(Context context) {         super(context);         // TODO Auto-generated constructor

自定義GridView實現割線解析

前兩天在些專案的時候碰到常用的GridView要實現一些分割線,之前就是用本方法利用listView和Item的背景顏色的不同線顯示分割線。這是最low的一種做法。於是我就簡單的寫了一個自定義的 GridView。 我們可以先看List怎麼設定分割線

Android控制元件GridView之仿支付寶錢包首頁帶有割線GridView九宮格的完美實現

部落格時間:2015-02-04 15:03 今天我們來模仿一下支付寶錢包首頁中帶有分割線的GridView,俗稱九宮格。先上圖,是你想要的效果麼?如果是請繼續往下看。