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

2014年11月03日 Android 9条评论 阅读8390次

自定义左中右独立设置的标题栏和自定义圆角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
看了本文是不是觉得很赞,那就赶紧点击下面按钮分享给身边的朋友吧!

9 条评论

  1. avatar edufom

    <a href="http://www.plunderpuss.com/moncler-vest-nordstrom-jp-monclera">moncler vest nordstrom jp</a> <a href="http://www.crgrentals.com/nike-air-presto-negro-and-oro-game-chaussuresb">nike air presto negro and oro game</a> <a href="http://www.zszlubanie.com/under-armour-team-basketball-sneakers-zapatosd">under armour team basketball sneakers</a> <a href="http://www.vincentclerc.com/asics-gel-noosa-tri-9-rosa-gold-ring-obuvl">asics gel noosa tri 9 rosa gold ring</a> <a href="http://www.revenueaco.com/pandora-bracelet-essence-uk-uses-pandorad">pandora bracelet essence uk uses</a> <a href="http://www.atouchofyoga.com/air-jordan6-r%C3%B8d-trainersi">air jordan6 r酶d</a>
    edufom http://www.edufom.com/

  2. avatar agencysync

    <a href="http://www.thepondineer.com/moncler-top-quality-men-down-jackets-stuffing-wool-hat-black-monclera">moncler top quality men down jackets stuffing wool hat black</a> <a href="http://www.dancebaytown.com/nike-kobe-11-violet-tips-chaussuresb">nike kobe 11 violet tips</a> <a href="http://www.newsbloggy.com/zapatilla-roja-nike-lunar-forever-4-msl-zapatosd">zapatilla roja nike lunar forever 4 msl</a> <a href="http://www.magianuar.com/nike-flyknit-lunar-2-bl%C3%A5-oransje-walkthrough-obuvl">nike flyknit lunar 2 bl氓 oransje walkthrough</a> <a href="http://www.carystyle.com/pandora-necklace-gift-login-pandorad">pandora necklace gift login</a> <a href="http://www.ehrcontrols.com/nike-air-max-2016-hommes-gris-nike-trainersi">nike air max 2016 hommes gris nike</a>
    agencysync http://www.agencysync.com/

  3. avatar armyourmind

    <a href="http://www.tasdizayni.com/canada-goose-citadel-parka-sverige-quiz-canadagoosea">canada goose citadel parka sverige quiz</a> <a href="http://www.blogtourney.com/asics-gel-noosa-tri-8-rosso-rosa-kurpese">asics gel noosa tri 8 rosso rosa</a> <a href="http://www.edgethrive.com/adidas-zx-700-violet-jaune-kit-kurpesa">adidas zx 700 violet jaune kit</a> <a href="http://www.kewauneecares.com/nike-kevin-zeitler-mens-black-elite-jersey-68-nfl-home-cincinnati-bengals-nflt">nike kevin zeitler mens black elite jersey 68 nfl home cincinnati bengals</a> <a href="http://www.resekipman.com/billig-nike-air-speed-turf-menns-gr%C3%A5-footg">billig nike air speed turf menns gr氓</a> <a href="http://www.robineliza.com/nike-hyperdunk-2014-femminile-blu-oro-chaussuresd">nike hyperdunk 2014 femminile blu oro</a>
    armyourmind http://www.armyourmind.com/

  4. avatar lucagerini

    <a href="http://www.taxinowapp.com/wie-man-blumen-kleid-tr%C3%A4gt-dresse">wie man blumen kleid tr盲gt</a> <a href="http://www.billingaco.com/air-jordan-1-armada-amarillo-footi">air jordan 1 armada amarillo</a> <a href="http://www.ovioscope.com/nike-zoom-winflo-3-kvinders-r%C3%B8d-lyser%C3%B8d-butyg">nike zoom winflo 3 kvinders r酶d lyser酶d</a> <a href="http://www.judygeitzen.com/parajumpers-vest-etiquette-leaving-parajumpersb">parajumpers vest etiquette leaving</a> <a href="http://www.bentwoodridge.com/canada-goose-hybridge-hoody-womens-basket-canadagooseb">canada goose hybridge hoody womens basket</a> <a href="http://www.dallasjudaica.com/kyrie-1-bhm-xdr-kaufen-kurpesk">kyrie 1 bhm xdr kaufen</a>
    lucagerini http://www.lucagerini.com/

  5. avatar murekachart

    <a href="http://www.texomatruss.com/parajumpers-vest-outerwear-compression-parajumpersa">parajumpers vest outerwear compression</a> <a href="http://www.askjms.com/moncler-down-jacket-grey-2017-monclera">moncler down jacket grey 2017</a> <a href="http://www.dublinraces.com/air-jordan-11-retro-rot-velvet-matte-chaussuresb">air jordan 11 retro rot velvet matte</a> <a href="http://www.denteraserinc.com/nike-air-max-2016-dark-bleu-femmes-zapatosj">nike air max 2016 dark bleu femmes</a> <a href="http://www.bearclawfire.com/nike-free-run-5.0-v4-p%C3%BArpura-rosado-obuvf">nike free run 5.0 v4 p煤rpura rosado</a> <a href="http://www.broadbandgeek.com/pandora-beads-volleyball-league-pandoraj">pandora beads volleyball league</a>
    murekachart http://www.murekachart.com/

  6. avatar alizatrade

    <a href="http://www.rokettubemi.com/air-jordan-3.5-blanco-p%C3%BArpura-kurpesd">air jordan 3.5 blanco p煤rpura</a> <a href="http://www.cumjacket.com/adidas-neo-comfort-footbed-wei%C3%9F-schuhel">adidas neo comfort footbed wei脽</a> <a href="http://www.hzrdcraft.com/air-jordan-retro-3.5-negro-plata-skof">air jordan retro 3.5 negro plata</a> <a href="http://www.clubrockorg.com/adidas-superstar-ii-grau-gr%C3%BCn-footf">adidas superstar ii grau gr眉n</a> <a href="http://www.giaiphapdautu.com/nike-flyknit-trainer-kopen-for-venta-sneakerd">nike flyknit trainer kopen for venta</a> <a href="http://www.spreymax.com/nike-air-max-invigor-tutti-nero-schuhef">nike air max invigor tutti nero</a>
    alizatrade http://www.alizatrade.com/

  7. avatar vitaminyemek

    <a href="http://www.bluesophy.com/nike-roshe-run-woven-svart-anthracite-kopen-runningf">nike roshe run woven svart anthracite kopen</a> <a href="http://www.stylehousestl.com/nike-dunk-sky-hi-wedge-gr%C3%BCn-schuhei">nike dunk sky hi wedge gr眉n</a> <a href="http://www.byvergara.com/minnesota-wild-mesh-hat-hath">minnesota wild mesh hat</a> <a href="http://www.ruthlesscrew.com/jordan-3-solid-oro-trainersce">jordan 3 solid oro</a> <a href="http://www.fullserviceap.com/nike-air-max-95-wei%C3%9F-grau-blau-schuhek">nike air max 95 wei脽 grau blau</a> <a href="http://www.idealkizlar.com/nike-air-max-90-og-vntg-infrar%C3%B8d-scarpeg">nike air max 90 og vntg infrar酶d</a>
    [url=http://www.vitaminyemek.com/]vitaminyemek[/url]

  8. avatar truthtapes

    <a href="http://www.egyptmaritime.com/nike-zoom-clear-out-lyser%C3%B8d-skol">nike zoom clear out lyser酶d</a> <a href="http://www.erstube.com/air-jordan-retro-29-bianca-rosa-scarpeh">air jordan retro 29 bianca rosa</a> <a href="http://www.thecardplayer.com/nike-roshe-camo-grigio-scarpei">nike roshe camo grigio</a> <a href="http://www.theweedaddict.com/air-jordan-jumpman-rosa-gold-schuheh">air jordan jumpman rosa gold</a> <a href="http://www.thecampingman.com/womens-nike-roshe-run-triangle-orange-shoesl">womens nike roshe run triangle orange</a> <a href="http://www.otuzbircek.com/rob-gronkowski-super-bowl-jersey-nfli">rob gronkowski super bowl jersey</a>
    truthtapes http://www.truthtapes.com/

  9. avatar LED display

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

欢迎留言