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

2014年11月03日 Android 1条评论 阅读3516次

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

1 条评论

  1. avatar LED display

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

欢迎留言




用户登录

sitemap