• Android菜鸟的成长笔记(3)——给QQ登录界面说So Easy


    上一篇:Android菜鸟的成长笔记(2)——第一个Android应用

    我们前面已经做了第一个Android应用程序,虽然有点像QQ的登录界面,但是很多地方还是很难看,这一篇咱们来将这个界面做成一个标准的商业界面,并一起来了解Android中的代码运行的原理。

    好吧,咱们开始吧,首先启动模拟器,为了让咱们的界面和QQ的登录界面一样我下载了一个QQ的apk文件,下面咱们将这个apk安装到我们的模拟器上,看看效果。

    怎么将apk安装到我们的模拟器上面呢?先给大家介绍一个SDK自带的工具adb

    如下图所示这个工具在sdk/platform-tools/下面



    好吧直接双击怎么一闪而过呢?这是因为我们没有在环境变量里面配置,还记得前面配置JDK的环境变量吗?我们暂时先不配置

    按住  开始+R  出现如下输入框,输入cmd然后确定

     

    好了,我们现在进入到window的控制台了,如下图所示:



    在这里用dos下面的命令:

    D:  到D盘

    cd xxx 到xxx目录


    下面开始正式安装我们的apk文件,我将QQ的apk文件放在D盘的根目录

    将apk文件安装到模拟器


    可以看到Success这说明我们已经安装成功了,下面我们来打开模拟器上的QQ并到登录界面


    其实有一种很好的学习方式就是抄袭,好吧,如果你认同我的观点下面我们就来抄袭一下QQ是怎么做的

    在抄袭别人之前还必须有一定的技术,不然抄不过来的哦。呵呵,开个玩笑,其实这个很简单。再给大家介绍一个SDK自动的工具。

    关于这个工具的详细请看我的另一篇博文:关于HierarchyViewer的使用

    好了启动HierarchyViewer之后如图,我们选择QQ安装包,然后点击Load View Hierarchy菜单


    我们可以找到我们想要的界面的组件,比如上面的QQ头像


    好吧下面我们就一个一个仿照QQ的组件来修改我们的组件,修改好的xml布局文件如下

    activity_main.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:gravity="center_horizontal"
    	android:background="#eeeeee">
    	<ImageView
    	    android:layout_width="wrap_content"
    	    android:layout_height="wrap_content"
    	    android:src="@drawable/login_default_avatar"
    	    android:layout_marginTop="20dip"
    	    android:background="@drawable/qzone_bg_user_avatar"/>
    	<RelativeLayout 
    	    android:layout_marginTop="13dip"
    	    android:layout_width="match_parent"
    	    android:layout_height="match_parent">
    	    <RelativeLayout
    	        android:id="@+id/input_edit_text"
    	        android:layout_centerHorizontal="true"
    	        android:layout_width="270dip"
    	        android:layout_height="100dip"
    	        android:paddingTop="15dip"
    	        android:background="@drawable/login_input">
    	        <LinearLayout 
    	            android:id="@+id/input_account"
    	            android:layout_width="match_parent"
    	            android:paddingLeft="15dip"
    	            android:layout_height="40dip">
    		        <TextView 
    		            android:layout_width="40dip"
    		            android:textColor="#cccccc"
    		            android:layout_height="wrap_content"
    		            android:text="@string/account"/>
    		        <EditText 
    		            android:layout_width="0dip"
    		            android:layout_height="40dip"
    		            android:layout_weight="1"
    		            android:background="@null"/>
    	        </LinearLayout>
    	        <ImageView 
    	            android:id="@+id/input_center_line"
    	            android:layout_below="@id/input_account"
    	            android:layout_width="match_parent"
    	            android:layout_height="1dip"
    	            android:background="@drawable/qb_tenpay_trans_records_open"/>
    	        <LinearLayout 
    	            android:layout_below="@id/input_center_line"
    	            android:paddingLeft="15dip"
    	            android:layout_width="match_parent"
    	            android:layout_height="40dip">
    		        <TextView 
    		            android:layout_width="40dip"
    		            android:textColor="#cccccc"
    		            android:layout_height="wrap_content"
    		            android:text="@string/password"/>
    		        <EditText 
    		            android:layout_width="0dip"
    		            android:layout_height="40dip"
    		            android:layout_weight="1"
    		            android:background="@null"/>
    	        </LinearLayout>
    	    </RelativeLayout>
    	    <LinearLayout
    	        android:layout_below="@id/input_edit_text"
    	        android:layout_marginTop="20dip"
    	        android:layout_width="match_parent"
    	        android:layout_height="wrap_content"
    	        android:gravity="center">
    	        <Button 
    	            android:layout_width="270dip"
    	            android:layout_height="40dip"
    	            android:text="@string/login_button"
    	            android:background="@drawable/login_button_nor"
    	            />
    	    </LinearLayout>
    	</RelativeLayout>
    </LinearLayout>

    现在的界面如下:



    这个界面和真真的QQ界面还有点不同的就是上面的标题myFirstApp,怎么去掉这个标题呢?

    有关主题和去掉actionBar详细请看我的另一篇博文:Android中去掉标题的方法总结

    我直接用第二种方法,在AndroidMainfest.xml文件中的<appliaction>中添加如下属性:

    android:theme="@android:style/Theme.NoTitleBar" 

    现在的运行效果如下:



    这个界面比上一个界面好多了吧!下一篇将介绍实现界面的主要组件及使用方法。

    源代码下载:http://download.csdn.net/detail/lxq_xsyu/6762549

    下一篇: 

    Android菜鸟的成长笔记(4)——你真的理解了吗?


  • 相关阅读:
    solr7之solrJ的使用
    solr7.3.1在CentOS7上的安装
    nginx配置:location配置方法及实例详解
    [读书]10g/11g编程艺术深入体现结构学习笔记(持续更新...)
    liunx系统计划任务管理(at/crond调度)
    Golden Gate 概念和机制
    Oracle三大经典表连接适用情况
    Oracle索引简单介绍与示例
    Oracle RAC的日志体系
    Oracle10g RAC的简单操作
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6469437.html
Copyright © 2020-2023  润新知