tnblog
首页
视频
资源
登录

渣渣学安卓之banner图和首页布局

5513人阅读 2019/2/23 14:59 总访问:186462 评论:2 收藏:0 手机
分类: android

接上文,登录页写完,该上首页了。

找度娘搜索 安卓APP首页布局,想借鉴下,没搜到相关代码。只能赶鸭子上架,自己琢磨。

效果图涉及项目隐私就不上了。


首先是登录页跳转,登录按钮里添加方法就可以搞定。


页面可视化布局我们通常在,res——layout下设计,代码部分在java文件夹的包下操作,后缀名为.java。

登录页面代码如下:

  1. public class login_user extends AppCompatActivity {
  2.     @Override
  3.     protected void onCreate(Bundle savedInstanceState) {
  4.         super.onCreate(savedInstanceState);
  5.         setContentView(R.layout.activity_login_user);
  6.         Button btn = (Button) findViewById(R.id.button22);
  7.         btn.setOnClickListener(new View.OnClickListener() {  
  8.             @Override
  9.             public void onClick(View v) {
  10.                 Intent intent = new Intent(login_user.this, MainActivity.class);
  11.                 startActivity(intent);
  12.             }
  13.         });
  14.     }
  15. }

(插播一句)如果此处我们需要自定义启动页面,可到manifests下的AndroidManifests.xml下去设置,如图:

其次是 banner图部分


轮播图现在有viewpager这个控件,但是没有思路,找度娘搜索了一下,发现了有前人做过的banner图demo,还附带插件,真是为民谋福利。下载起来,果真能用,下载地址附在这里,有需要的可以下载来玩玩。

链接:https://pan.baidu.com/s/1F4WIfNVYAf35J-CYO9VkEQ 

提取码:9fgn 


再然后就是页面布局了,无非就是各种拖拖拖,调调调,拉拉拉,直接上布局代码。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  8.     <LinearLayout
  9.         android:id="@+id/linearLayout7"
  10.         android:layout_width="0dp"
  11.         android:layout_height="420dp"
  12.         android:gravity="center_horizontal"
  13.         android:orientation="vertical"
  14.         app:layout_constraintBottom_toBottomOf="parent"
  15.         app:layout_constraintEnd_toEndOf="parent"
  16.         app:layout_constraintStart_toStartOf="parent">
  17.         <LinearLayout
  18.             android:layout_width="match_parent"
  19.             android:layout_height="35dp"
  20.             android:orientation="horizontal">
  21.             <Button
  22.                 android:id="@+id/button"
  23.                 style="@style/Widget.AppCompat.Button.Colored"
  24.                 android:layout_width="20dp"
  25.                 android:layout_height="40dp"
  26.                 android:layout_marginLeft="15dp"
  27.                 android:layout_weight="2"
  28.                 android:text="最新"
  29.                 tools:background="@android:color/white"
  30.                 tools:textColor="@android:color/holo_red_light" />
  31.             <TextView
  32.                 android:id="@+id/textView"
  33.                 android:layout_width="wrap_content"
  34.                 android:layout_height="45dp"
  35.                 android:layout_weight="6"
  36.                 android:paddingLeft="10dp"
  37.                 android:paddingTop="8dp"
  38.                 android:text="今天下午两点在大会议室开会" />
  39.         </LinearLayout>
  40.         <LinearLayout
  41.             android:layout_width="match_parent"
  42.             android:layout_height="90dp"
  43.             android:layout_gravity="center_vertical"
  44.             android:orientation="horizontal"
  45.             android:paddingLeft="20dp">
  46.             <LinearLayout
  47.                 android:layout_width="85dp"
  48.                 android:layout_height="90dp"
  49.                 android:orientation="vertical">
  50.                 <ImageView
  51.                     android:id="@+id/imageView3"
  52.                     android:layout_width="55dp"
  53.                     android:layout_height="70dp"
  54.                     app:srcCompat="@drawable/xwzx" />
  55.                 <TextView
  56.                     android:id="@+id/textView14"
  57.                     android:layout_width="wrap_content"
  58.                     android:layout_height="match_parent"
  59.                     android:gravity="center_horizontal"
  60.                     android:text="新闻资讯"
  61.                     android:textColor="@android:color/black" />
  62.             </LinearLayout>
  63.             <LinearLayout
  64.                 android:layout_width="85dp"
  65.                 android:layout_height="90dp"
  66.                 android:orientation="vertical">
  67.                 <ImageView
  68.                     android:id="@+id/imageView5"
  69.                     android:layout_width="55dp"
  70.                     android:layout_height="70dp"
  71.                     app:srcCompat="@drawable/h_wyzf" />
  72.                 <TextView
  73.                     android:id="@+id/textView15"
  74.                     android:layout_width="wrap_content"
  75.                     android:layout_height="wrap_content"
  76.                     android:gravity="center_horizontal"
  77.                     android:text="专家访谈"
  78.                     android:textColor="@android:color/black" />
  79.             </LinearLayout>
  80.             <LinearLayout
  81.                 android:layout_width="85dp"
  82.                 android:layout_height="90dp"
  83.                 android:orientation="vertical">
  84.                 <ImageView
  85.                     android:id="@+id/imageView7"
  86.                     android:layout_width="55dp"
  87.                     android:layout_height="70dp"
  88.                     app:srcCompat="@drawable/h_lzxcp" />
  89.                 <TextView
  90.                     android:id="@+id/textView16"
  91.                     android:layout_width="wrap_content"
  92.                     android:layout_height="wrap_content"
  93.                     android:text="职务宣传"
  94.                     android:textColor="@android:color/black" />
  95.             </LinearLayout>
  96.             <LinearLayout
  97.                 android:layout_width="85dp"
  98.                 android:layout_height="90dp"
  99.                 android:orientation="vertical">
  100.                 <ImageView
  101.                     android:id="@+id/imageView8"
  102.                     android:layout_width="55dp"
  103.                     android:layout_height="70dp"
  104.                     app:srcCompat="@drawable/h_qhzzd" />
  105.                 <TextView
  106.                     android:id="@+id/textView11"
  107.                     android:layout_width="match_parent"
  108.                     android:layout_height="wrap_content"
  109.                     android:text="新闻播报"
  110.                     android:textColor="@android:color/black" />
  111.             </LinearLayout>
  112.         </LinearLayout>
  113.         <LinearLayout
  114.             android:layout_width="wrap_content"
  115.             android:layout_height="90dp"
  116.             android:layout_marginLeft="-15dp"
  117.             android:orientation="horizontal"
  118.             android:paddingTop="10dp">
  119.             <LinearLayout
  120.                 android:layout_width="175dp"
  121.                 android:layout_height="match_parent"
  122.                 android:orientation="vertical">
  123.                 <ImageView
  124.                     android:id="@+id/imageView12"
  125.                     android:layout_width="match_parent"
  126.                     android:layout_height="wrap_content"
  127.                     app:srcCompat="@drawable/h_zyjs" />
  128.             </LinearLayout>
  129.             <LinearLayout
  130.                 android:layout_width="150dp"
  131.                 android:layout_height="wrap_content"
  132.                 android:orientation="vertical">
  133.                 <ImageView
  134.                     android:id="@+id/imageView13"
  135.                     android:layout_width="175dp"
  136.                     android:layout_height="wrap_content"
  137.                     app:srcCompat="@drawable/h_qhzx" />
  138.             </LinearLayout>
  139.         </LinearLayout>
  140.         <LinearLayout
  141.             android:layout_width="match_parent"
  142.             android:layout_height="90dp"
  143.             android:layout_marginTop="10dp"
  144.             android:orientation="horizontal"
  145.             android:paddingLeft="20dp">
  146.             <LinearLayout
  147.                 android:layout_width="85dp"
  148.                 android:layout_height="90dp"
  149.                 android:orientation="vertical">
  150.                 <ImageView
  151.                     android:id="@+id/imageView20"
  152.                     android:layout_width="55dp"
  153.                     android:layout_height="70dp"
  154.                     app:srcCompat="@drawable/png_1" />
  155.                 <TextView
  156.                     android:id="@+id/textView21"
  157.                     android:layout_width="wrap_content"
  158.                     android:layout_height="wrap_content"
  159.                     android:gravity="center_horizontal"
  160.                     android:text="新闻服务"
  161.                     android:textColor="@android:color/black" />
  162.             </LinearLayout>
  163.             <LinearLayout
  164.                 android:layout_width="85dp"
  165.                 android:layout_height="90dp"
  166.                 android:orientation="vertical">
  167.                 <ImageView
  168.                     android:id="@+id/imageView"
  169.                     android:layout_width="55dp"
  170.                     android:layout_height="70dp"
  171.                     app:srcCompat="@drawable/png_2" />
  172.                 <TextView
  173.                     android:id="@+id/textView4"
  174.                     android:layout_width="wrap_content"
  175.                     android:layout_height="wrap_content"
  176.                     android:gravity="center_horizontal"
  177.                     android:text="新闻管理"
  178.                     android:textColor="@android:color/black" />
  179.             </LinearLayout>
  180.             <LinearLayout
  181.                 android:layout_width="85dp"
  182.                 android:layout_height="90dp"
  183.                 android:orientation="vertical">
  184.                 <ImageView
  185.                     android:id="@+id/imageView2"
  186.                     android:layout_width="55dp"
  187.                     android:layout_height="70dp"
  188.                     app:srcCompat="@drawable/png_3" />
  189.                 <TextView
  190.                     android:id="@+id/textView5"
  191.                     android:layout_width="wrap_content"
  192.                     android:layout_height="wrap_content"
  193.                     android:gravity="center_horizontal"
  194.                     android:text="事务管理"
  195.                     android:textColor="@android:color/black" />
  196.             </LinearLayout>
  197.             <LinearLayout
  198.                 android:layout_width="85dp"
  199.                 android:layout_height="90dp"
  200.                 android:orientation="vertical">
  201.                 <ImageView
  202.                     android:id="@+id/imageView4"
  203.                     android:layout_width="55dp"
  204.                     android:layout_height="70dp"
  205.                     app:srcCompat="@drawable/png_4" />
  206.                 <TextView
  207.                     android:id="@+id/textView6"
  208.                     android:layout_width="wrap_content"
  209.                     android:layout_height="wrap_content"
  210.                     android:gravity="center_horizontal"
  211.                     android:text="新闻轶事"
  212.                     android:textColor="@android:color/black" />
  213.             </LinearLayout>
  214.         </LinearLayout>
  215.         <LinearLayout
  216.             android:layout_width="match_parent"
  217.             android:layout_height="match_parent"
  218.             android:orientation="horizontal"
  219.             android:paddingLeft="20dp">
  220.             <LinearLayout
  221.                 android:layout_width="85dp"
  222.                 android:layout_height="90dp"
  223.                 android:orientation="vertical">
  224.                 <ImageView
  225.                     android:id="@+id/imageView6"
  226.                     android:layout_width="55dp"
  227.                     android:layout_height="70dp"
  228.                     app:srcCompat="@drawable/png_5" />
  229.                 <TextView
  230.                     android:id="@+id/textView7"
  231.                     android:layout_width="wrap_content"
  232.                     android:layout_height="wrap_content"
  233.                     android:gravity="center_horizontal"
  234.                     android:text="时事热点"
  235.                     android:textColor="@android:color/black" />
  236.             </LinearLayout>
  237.             <LinearLayout
  238.                 android:layout_width="85dp"
  239.                 android:layout_height="90dp"
  240.                 android:orientation="vertical">
  241.                 <ImageView
  242.                     android:id="@+id/imageView9"
  243.                     android:layout_width="55dp"
  244.                     android:layout_height="70dp"
  245.                     app:srcCompat="@drawable/png_6" />
  246.                 <TextView
  247.                     android:id="@+id/textView8"
  248.                     android:layout_width="wrap_content"
  249.                     android:layout_height="wrap_content"
  250.                     android:gravity="center_horizontal"
  251.                     android:text="今日头条"
  252.                     android:textColor="@android:color/black" />
  253.             </LinearLayout>
  254.             <LinearLayout
  255.                 android:layout_width="85dp"
  256.                 android:layout_height="90dp"
  257.                 android:orientation="vertical">
  258.                 <ImageView
  259.                     android:id="@+id/imageView10"
  260.                     android:layout_width="55dp"
  261.                     android:layout_height="70dp"
  262.                     app:srcCompat="@drawable/png_7" />
  263.                 <TextView
  264.                     android:id="@+id/textView9"
  265.                     android:layout_width="wrap_content"
  266.                     android:layout_height="wrap_content"
  267.                     android:gravity="center_horizontal"
  268.                     android:text="管理工作"
  269.                     android:textColor="@android:color/black" />
  270.             </LinearLayout>
  271.             <LinearLayout
  272.                 android:layout_width="85dp"
  273.                 android:layout_height="90dp"
  274.                 android:orientation="vertical">
  275.                 <ImageView
  276.                     android:id="@+id/imageView11"
  277.                     android:layout_width="55dp"
  278.                     android:layout_height="70dp"
  279.                     app:srcCompat="@drawable/png_8" />
  280.                 <TextView
  281.                     android:id="@+id/textView10"
  282.                     android:layout_width="wrap_content"
  283.                     android:layout_height="wrap_content"
  284.                     android:gravity="center_horizontal"
  285.                     android:text="远程咨询"
  286.                     android:textColor="@android:color/black" />
  287.             </LinearLayout>
  288.         </LinearLayout>
  289.     </LinearLayout>
  290.     <FrameLayout
  291.         android:id="@+id/frameLayout"
  292.         android:layout_width="0dp"
  293.         android:layout_height="150dp"
  294.         app:layout_constraintEnd_toEndOf="parent"
  295.         app:layout_constraintHorizontal_bias="0.0"
  296.         app:layout_constraintStart_toStartOf="parent"
  297.         app:layout_constraintTop_toTopOf="parent">
  298.         <android.support.v4.view.ViewPager
  299.             android:id="@+id/viewPager"
  300.             android:layout_width="match_parent"
  301.             android:layout_height="match_parent"
  302.             tools:layout_editor_absoluteX="8dp"
  303.             tools:layout_editor_absoluteY="0dp" />
  304.         <LinearLayout
  305.             android:layout_width="match_parent"
  306.             android:layout_height="35dip"
  307.             android:layout_gravity="bottom"
  308.             android:background="#33000000"
  309.             android:gravity="center_vertical"
  310.             android:orientation="horizontal"
  311.             android:weightSum="10">
  312.             <TextView
  313.                 android:id="@+id/tv_pager_title"
  314.                 android:layout_width="0dp"
  315.                 android:layout_height="35dip"
  316.                 android:layout_weight="8"
  317.                 android:gravity="center_vertical"
  318.                 android:paddingLeft="8dip"
  319.                 android:text="加载图片轮播失败"
  320.                 android:textColor="@android:color/white" />
  321.             <LinearLayout
  322.                 android:id="@+id/lineLayout_dot"
  323.                 android:layout_width="match_parent"
  324.                 android:layout_height="match_parent"
  325.                 android:layout_weight="1"
  326.                 android:gravity="center|right"
  327.                 android:orientation="horizontal"></LinearLayout>
  328.         </LinearLayout>
  329.     </FrameLayout>
  330. </android.support.constraint.ConstraintLayout>

效果图如上所示,页面是出来了,此处还存在一个问题,那就是不能滑动,我需要当子控件超过了屏幕,就可以上下或者左右的滚动来展示。继续找度娘,有同胞说可用ScrollView控件,下次试了再来。



欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价

小见

2019/2/24 18:18:37

哇哦,小姐姐这个系列文章写得很好哇,期待更多佳作~

cycwind

2019/2/25 14:02:58

zb

渣渣学安卓之登录摸索及页面效果实现

(背景)过完年来,一脸懵逼状态下开始的安卓学习,学错的求解勿喷。创建了个安卓下载地址 有需要的可以直接下载安装链接:...

渣渣学安卓之ScrollView控件实现屏幕上下滚动

android实现屏幕上下滚动有个ScrollView控件,拖动控件自带LinearLayout, 把需要滑动的页面放在LinearLayout其下即可。&lt...

渣渣学安卓之时间选择器和文本框操作

一、时间选择器有时候我们做页面时需要时间选择器,先上效果图看了下android studio,没有这个样式的控件,找了下度娘发现...
真正的顺其自然,其实是竭尽所能之后的不强求,而非两手一摊的不作为
排名
19
文章
24
粉丝
11
评论
15
css实现简单矩形对话框
剑轩 : 现在来看一下,这个正好用到
三分钟快速复习MVC知识
瑾语 : 棒 总结的很好
渣渣学安卓之时间选择器和文本框操作
修心 : 666666横线的方式和我想法完全一样
渣渣学安卓之banner图和首页布局
晓见 : 哇哦,小姐姐这个系列文章写得很好哇,期待更多佳作~
渣渣学安卓之登录摸索及页面效果实现
剑轩 : 帅帅帅帅帅!那个背景图是不是有点太大了哦。哈哈相素太高了么,可...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
我希望兜兜转转之后那个人还是你。