自定义左中右独立设置的标题栏和自定义圆角Listview

2014年11月03日 Android 5条评论 阅读5824次

自定义左中右独立设置的标题栏和自定义圆角Listview

Will.Zhang

今天想分享一个自定义标题栏和listview的UI。

先上图片,看效果。请无视丑陋的配图和配色。

device-2014-10-29-195906.png

两块内容,分开单独说。
自定义标题栏:设计为左侧可显示一个图标,中间可设置一个文本的标题,右侧可设置一个显示的图标。
主要代码如下:
layout布局部分:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@drawable/bg_action_item"
        android:gravity="left" >

        <ImageView
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:layout_centerHorizontal="true" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:textSize="22sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:background="@drawable/bg_action_item"
        android:gravity="right" >

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

</RelativeLayout>


Activity的java部分:
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);   
        setContentView(R.layout.activity_main);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.titlebar);
        // 设置标题栏的左侧图标
        ImageView leftIV = (ImageView) findViewById(R.id.left);
        leftIV.setImageResource(R.drawable.ic_back);
        // 设置标题栏的中间标题文字
        TextView titleTV = (TextView) findViewById(R.id.title);
        titleTV.setText("shouye");
        // 设置标题栏的右侧
        ImageView rightIV = (ImageView) findViewById(R.id.right);
        rightIV.setImageResource(R.drawable.ic_settings);
        mListView = (CornerListView) findViewById(R.id.mylist);

自定义标题栏的style:
<style name="CustomWindowTitleBackground">
        <item name="android:background">#8EC191</item>
    </style>

    <style name="titlebar" parent="android:Theme">
        <item name="android:windowTitleSize">50dp</item>
        <item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
    </style>

另外再到AndroidManifest中设置该Activity的style。

接下来是圆角风格的listview,现在也是比较常见的。
另外这个listview中每行item项目还单独自定义了Layout,顺便也把自定义Layout的代码也分享下。

首先是自定义Layout的布局文件


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/layout_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp" />

    <TextView
        android:id="@+id/layout_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/layout_icon"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:src="@drawable/ic_arrow" />
    </LinearLayout>

</RelativeLayout>



接下来是自定义Layout的java类
package com.example.test.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.test.R;

public class MyLayout extends LinearLayout {

    private ImageView icon;
    private TextView text;

    public MyLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    private void initView() {
        LayoutInflater inflater = LayoutInflater.from(getContext());
        inflater.inflate(R.layout.custom_layout_item, this, true);

        icon = (ImageView) findViewById(R.id.layout_icon);
        text = (TextView) findViewById(R.id.layout_text);
    }

    public void setIcon(int resId) {
        icon.setImageResource(resId);
    }

    public void setText(String str) {
        text.setText(str);
    }
}
再就是主界面的布局,只有一个Listview,很简单就不再贴出来了,但注意要Listview的background属性
Listview的background定义文件,就是在这里实现了Listview圆角显示的效果。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="1dp"
        android:color="#2345da" />
    <solid
        android:color="#fff4ff" />
    <corners
        android:radius="5dp" />
</shape>


其他的定义文件还有一些,就不一一贴出来了,最后如有需要的朋友,请留言给并发邮件给我,我会用邮箱发送的。

另附上本工程的代码结构图:

Structure_CustomTitleBarListView.jpg

本文至此。如有问题,请留言&邮件。

分享本文至:

WRITTEN BY

avatar
看了本文是不是觉得很赞,那就赶紧点击下面按钮分享给身边的朋友吧!

5 条评论

  1. avatar torcgunstore

    <a href="http://www.helpforaspen.com/nike-kobe-brown-grey-runninge">nike kobe brown grey</a> <a href="http://www.mcmartial.com/adidas-pr%C3%B8dator-soccer-lilla-guld-schuhea">adidas pr酶dator soccer lilla guld</a> <a href="http://www.puurderleven.com/nike-flyknit-roshe-run-grau-junior-scarpeb">nike flyknit roshe run grau junior</a> <a href="http://www.ipartybooths.com/nike-air-max-2019-green-uk-shoeso">nike air max 2019 green uk</a> <a href="http://www.senegalreview.com/nike-free-6.0-kvinders-r%C3%B8d-kurpesb">nike free 6.0 kvinders r酶d</a> <a href="http://www.poshandpearls.com/buy-nike-shoes-online-cheap-zapatost">buy nike shoes online cheap</a>
    torcgunstore http://www.torcgunstore.com/

  2. avatar k3htroya

    <a href="http://www.ehbnzb84.com/nike-air-force-1-mid-rose-or-schuhee">nike air force 1 mid rose or</a> <a href="http://www.n1jvmtjv.com/jordan-6-noir-infrarouge-toddler-kurpesc">jordan 6 noir infrarouge toddler</a> <a href="http://www.r2g427lp.com/nike-free-3.0-v5-grau-wei%C3%9F-crimson-field-butyf">nike free 3.0 v5 grau wei脽 crimson field</a> <a href="http://www.cv9uzx13.com/air-jordan-11-low-negro-blanco-patent-cuero-scarpee">air jordan 11 low negro blanco patent cuero</a> <a href="http://www.pqphql39.com/nike-roshe-run-todas-negro-kaskus-schuhea">nike roshe run todas negro kaskus</a> <a href="http://www.8z1143o9.com/adidas-copa-mundial-wei%C3%9F-and-gold-zebra-kurpesc">adidas copa mundial wei脽 and gold zebra</a>
    k3htroya http://www.k3htroya.com/

  3. avatar ezzolawaz

    <a href="http://www.daddeaze.com/nike-air-force-1-low-blu-nero-kurpesa">nike air force 1 low blu nero</a> <a href="http://www.debracousins.com/nike-free-good-for-running-sneakerb">nike free good for running</a> <a href="http://www.yankaripark.com/nike-air-force-1-low-herren-blau-shoesg">nike air force 1 low herren blau</a> <a href="http://www.yicailottery.com/cheap-chicago-bulls-snapback-hats-hats">cheap chicago bulls snapback hats</a> <a href="http://www.calebcraw.com/nike-air-pegasus-92-womens-gold-yellow-sneakerf">nike air pegasus 92 womens gold yellow</a> <a href="http://www.liquidputter.com/nike-roshe-run-iv-oro-p%C3%BArpura-obuvc">nike roshe run iv oro p煤rpura</a>
    [url=http://www.ezzolawaz.com/]ezzolawaz[/url]

  4. avatar veruccapedis

    <a href="http://www.aberturasdh.com/air-max-2015-purple-flowers-runningd">air max 2015 purple flowers</a> <a href="http://www.jknets.com/air-jordan-retro-8-dam%C3%A4nner-silber-sneakere">air jordan retro 8 dam盲nner silber</a> <a href="http://www.saeedlawyer.com/air-jordan-super-fly-iv-black-purple-shoesd">air jordan super fly iv black purple</a> <a href="http://www.hyaluronicset.com/kids-nike-air-max-bw-skox">kids nike air max bw</a> <a href="http://www.yupoji.com/nike-air-max-black-cheap-skoe">nike air max black cheap</a> <a href="http://www.thankhuc.com/ralph-lauren-bowling-bag-polor">ralph lauren bowling bag</a>
    veruccapedis http://www.veruccapedis.com/

  5. avatar LED display

    效果不错,谢谢分享,求回访哈。

欢迎留言




用户登录

sitemap