Android UI基礎 仿閒魚釋出頁
Android UI基礎 仿閒魚釋出頁
實現圖:
原始碼地址:
https://download.csdn.net/download/weixin_44758662/12819060
程式碼太長不好看
建議直接複製執行,需要可收藏
用到的資源在最下面
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colo_bac"
tools:context=".DemoActivity">
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="取消"
android:textColor="@color/text_black"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="5dp"
android:text="釋出"
android:textColor="@color/text_main"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="@drawable/shape_yellow"
android:paddingStart="15dp"
android:paddingTop="5dp"
android:paddingEnd="15dp"
android:paddingBottom="5dp"
android:text="釋出"
android:textSize="14sp" />
</RelativeLayout>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_white"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/relativeLayout"
app:layout_constraintVertical_bias="0.0">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@null"
android:hint="標題"
android:padding="10dp"
android:textColor="@color/text_main"
android:textColorHint="@color/text_main1"
android:textSize="16sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@null"
android:gravity="start|top"
android:hint="內容"
android:padding="10dp"
android:textColor="@color/text_main"
android:textColorHint="@color/text_main1"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_white"
android:orientation="vertical"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout"
app:layout_constraintVertical_bias="0.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/ic_add_black_48dp"
android:drawablePadding="5dp"
android:padding="10dp"
android:text="新增圖片" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="發貨地: 天津 津南區" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/shape_white"
android:orientation="vertical"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/icon_money" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="5dp"
android:text="價格"
android:textColor="@color/text_main"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_right_24dp"
android:gravity="end|center_vertical"
android:padding="5dp"
android:text="¥0.00"
android:textColor="@color/colo_money"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="@color/color_link" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/icon_same" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="5dp"
android:text="同款寶貝"
android:textColor="@color/text_main"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_right_24dp"
android:gravity="end|center_vertical"
android:padding="5dp"
android:text="關聯同款後,將推薦想買的人"
android:textColor="@color/text_main1"
android:textSize="16sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="@color/color_link" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/icon_more" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_right_24dp"
android:gravity="center_vertical"
android:layout_marginStart="5dp"
android:padding="5dp"
android:text="更多資訊"
android:textColor="@color/text_main"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
使用到的資源:
color :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="text_main">#49496a</color>
<color name="text_main1">#838895</color>
<color name="text_black">#4E5157</color>
<color name="colo_money">#ff4757</color>
<color name="colo_blue">#2196F3</color>
<color name="color_link">#f0f0f0</color>
<color name="colo_white">#fff</color>
<color name="colo_bac">#f8f8f8</color>
<color name="colo_yellow">#FEC62E</color>
<color name="colo_red">#E53935</color>
</resources>
使用到的圖片,我使用的是向量圖:
向量圖最大特點:使用者可以任意縮放影像顯示,而不會破壞影像的清晰度、細節等。
可以選擇Clip Art 也可以選擇網上下載的然後local file(圖片格式為SVG,PSD)本地匯入
使用: android:src="@drawable/icon_money" /> 即可
相關文章
- Flutter仿閒魚底部導航欄實現Flutter
- android基礎學習-android篇day12-android的UI基礎入門AndroidUI
- python django整理(三)頁面基礎(仿BBS)PythonDjango
- 閒魚:2023年閒魚日均GMV破10億 超1億人掛出閒置
- android基礎學習-android篇day12-UI基礎控制元件(上)AndroidUI控制元件
- android基礎學習-android篇day13-UI基礎控制元件(下)AndroidUI控制元件
- android基礎學習-android篇day14-UI基礎控制元件綜合案例——點餐系統AndroidUI控制元件
- 基於 React 的 UI 元件庫 uiw v1.2.10 釋出ReactUI元件
- Flutter學習筆記--仿閒魚底部導航欄帶有中間凸起圖示Flutter筆記
- Flutter高內聚元件怎麼做?閒魚閒魚打造開源高效方案!Flutter元件
- Android基礎—FragmentAndroidFragment
- 大魚號如何批量釋出視訊
- 閒魚:2019年閒魚年會經濟資料 土豪公司年會送特斯拉
- Android基礎知識Android
- Android 基礎之 HandlerAndroid
- Android 繪圖基礎Android繪圖
- 閒魚基於Flutter技術的架構演進和創新Flutter架構
- 閒魚基於Dart生態的FaaS前端一體化建設Dart前端
- android專案點餐app1:基礎功能:閃屏頁、登入頁面、註冊頁面AndroidAPP
- MIT釋出軟體機器魚,臥底魚群大計可成MIT
- 正式釋出Android Things 1.0Android
- 閒魚低成本養娃報告
- 零基礎學習UI設計容易出現哪些誤區UI
- 網頁佈局基礎網頁
- iView 3.4.1 釋出,基於 Vue.js 的企業級 UI 元件庫ViewVue.jsUI元件
- UI元件Kendo UI釋出R2 2018|附下載UI元件
- UI自動化基礎知識UI
- 仿鬥魚聊天:基於CoreText的物件導向圖文排版工具AWRichText物件
- Android 面試基礎篇Android面試
- Android基礎-Activity基本使用Android
- Redis基礎系列-0x008:釋出訂閱模式Redis模式
- Gartner釋出:全球聯絡中心基礎設施魔力象限
- Excelize 釋出 2.0.1 版本,Go 語言 Excel 文件基礎庫ExcelizeGo
- Excelize 釋出 2.5.0 版本,Go 語言 Excel 文件基礎庫ExcelizeGo
- Excelize 釋出 2.7.1 版本,Go 語言 Excel 文件基礎庫ExcelizeGo
- 12 - Vue3 UI Framework - 打包釋出VueUIFramework
- 基於jQuery UI的仿PhotoShop介面螢幕標尺外掛jQueryUI
- Android library 釋出多渠道 AARAndroid