android项目 之 记事本（1） ----- 界面设计

      主要的界面有两个，分别如下：

 

         左边是进入后的主界面，右边则是进入添加记事模式的界面，主要的功能与可以从图中体现出来，下面是主要代码

         activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/main_bg"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

        title_add.xml这个是重新设计标题栏，覆盖系统的标题栏

<?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="45dp" 
    android:background="@drawable/navigationbar_bg">
    <ImageView 
        android:id="@+id/iv_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@drawable/icon"
        android:layout_margin="5dp"
        android:layout_alignParentLeft="true"
        />
   	<TextView 
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:text="记事本"
        android:layout_margin="5dp"
        android:textSize="20dp"
        android:gravity="center_vertical"
        android:layout_toRightOf="@id/iv_icon"
        />
	<Button 
	    android:id="@+id/bt_add"
	    android:layout_height="35dp"
	    android:layout_width="35dp"
	    android:background="@drawable/navigationbar_add"
	    android:layout_toLeftOf="@+id/bt_setting"
	    android:layout_margin="5dp"
	    />
	<Button 
	    android:id="@+id/bt_setting"
	    android:layout_height="35dp"
	    android:layout_width="35dp"
	    android:background="@drawable/navigationbar_setting"
	    android:layout_alignParentRight="true"
	    android:layout_margin="5dp"
	   
	    />
	
</RelativeLayout>

       activity_add.xml 这个是添加记事的主界面

<?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:background="@drawable/bg">
    <com.example.notes.LineEditText
        android:id="@+id/et_note"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000"
        android:scrollbars="vertical"
        android:fadingEdge="vertical"
        android:inputType="textMultiLine"
        android:hint="请输入内容"
        android:gravity="top"
        android:textSize="20sp"
        android:layout_margin="5dp"
        android:lineSpacingExtra="10dp"
        />
    <ScrollView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >
       <GridView 
       android:id="@+id/bottomMenu"
       android:layout_width="match_parent"
       android:layout_height="45dp"
       android:numColumns="auto_fit"
       android:background="@drawable/navigationbar_bg"
       android:horizontalSpacing="10dp"
       ></GridView>
        
    </ScrollView>
 </RelativeLayout>

        其中，    com.example.notes.LineEditText是自定义的EditText,

        com.example.notes.LineEditText..java

package com.example.notes;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.EditText;

public class LineEditText extends EditText {
	private Rect mRect;
	private Paint mPaint;
	
	public LineEditText(Context context, AttributeSet attrs) {
		// TODO Auto-generated constructor stub
		super(context,attrs);
		mRect = new Rect();
		mPaint = new Paint();
		mPaint.setColor(Color.GRAY);
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//得到EditText的总行数
		int lineCount = getLineCount();
		Rect r = mRect;
		Paint p = mPaint;
		//为每一行设置格式 
		for(int i = 0; i < lineCount;i++){
			//取得每一行的基准Y坐标，并将每一行的界限值写到r中
			int baseline = getLineBounds(i, r);
			//设置每一行的文字带下划线
			canvas.drawLine(r.left, baseline+5, r.right, baseline+5, p);
		}
	}
}

         item_button.xml这个是上述GridView中每一项布局文件

<?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="vertical" >
    <ImageView 
        android:id="@+id/item_image"
        android:layout_height="35dp"
        android:layout_width="35dp"
        android:layout_margin="5dp"
        />
  
</RelativeLayout>

        title_add.xml 同样是添加记事界面的标题栏

<?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="45dp" 
    android:background="@drawable/navigationbar_bg">
    <Button 
        android:id="@+id/bt_back"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="@drawable/navigationbar_backup"
        android:layout_margin="5dp"
        android:layout_alignParentLeft="true"
        />
   	<TextView 
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:text="新增记事"
        android:layout_margin="5dp"
        android:textSize="20dp"
        android:gravity="center_vertical"
        android:layout_centerHorizontal="true"
        />
	
	<Button 
	    android:id="@+id/bt_save"
	    android:layout_height="35dp"
	    android:layout_width="35dp"
	    android:background="@drawable/navigationbar_save"
	    android:layout_alignParentRight="true"
	    android:layout_margin="5dp"
	    />
	
</RelativeLayout>

 

     去掉系统的标题栏，并且用自己的标题栏的方法为，注意顺序不能错       

        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.activity_main);
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title_main);  

   为GridView添加内容，用到了SimpleAdapter,主要代码为：

	private GridView bottomMenu;
	//底部按钮 
	private int[] bottomItems = {
			R.drawable.tabbar_handwrite,
			R.drawable.tabbar_paint,
			R.drawable.tabbar_microphone,
			R.drawable.tabbar_photo,
			R.drawable.tabbar_camera,
			R.drawable.tabbar_appendix
	};

<pre class="java" abp="926" name="code">	//配置菜单
	private void initBottomMenu(){
		ArrayList<Map<String,Object>> menus = new ArrayList<Map<String,Object>>();
		for(int i = 0;i < bottomItems.length;i++){
			Map<String,Object> item = new HashMap<String,Object>();
			item.put("image",bottomItems[i]);
			menus.add(item);
		}
		bottomMenu.setNumColumns(bottomItems.length);
		bottomMenu.setSelector(R.drawable.bottom_item);
		SimpleAdapter mAdapter = new SimpleAdapter(AddActivity.this, menus,R.layout.item_button, new String[]{"image"}, new int[]{R.id.item_image});
		bottomMenu.setAdapter(mAdapter);
	}
	

 

          到此上述界面已完成，下一节，实现添加相片功能