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

2014年11月03日 Android 4条评论 阅读7444次

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

4 条评论

  1. 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/

  2. 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]

  3. 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/

  4. avatar LED display

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

欢迎留言




用户登录

sitemap