Android 天气APP(十三)仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整(上)

184 阅读9分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第13天,点击查看活动详情

前言

自定义背景,做这个功能的原因是因为一些人觉得必应的每日一图并不好看,想要手动上传自己手机里的壁纸作为背景,并且应用也要有自带的壁纸供用户选择。正所谓有需就有求,这是亘古不变的道理,第三个就是UI的优化,这次我是打算把切换城市的弹窗挪到二级菜单里面,右上角做一个一级菜单列表,这个列表暂定功能为切换城市和切换背景,这样做也是符合大众APP的审美,比如微信、支付宝、QQ之类的。

正文

不知道你们是不是被这个仿微信弹窗的内容吸引进来的,是的话,你就来对地方了。我不是标题党,我是踏踏实实的程序员,不搞那些花里胡哨的文章标题,实事求是,我觉那种标题吸引别人进来看,结果什么有用的知识都没有,得浪费别人的时间等同于诈骗。

弹窗

首先在项目的layout布局文件中创建一个弹窗的布局 window_add.xml,弹窗的背景图片是一个.9可拉伸的png图片, 在这里插入图片描述 在这里插入图片描述 一黑一白,想用自取即可,或者可以去GitHub上面源码里去取图。 在上一篇文章中,在mvplibrary中的res文件下新建了colors.xml,并在里面新增几个颜色进去,所以为了更好的管理项目中的颜色,后续的颜色都会写在这里,其他页面通过@color/black来调用即可, 在这里插入图片描述 然后再创建一个dimen.xml文件,这个里面主要防止尺寸大小和字体大小 在这里插入图片描述 调用方式通过@dimen/dp_10或者@dimen/sp_10 因为下面的布局文件中会涉及到这两个xml里面的内容,所以我这里会说的比较清楚。 colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="arc_bg_color">#C6D7F4</color>
    <color name="arc_progress_color">#FBFEF7</color>
    <color name="white">#ffffff</color><!--白色-->
    <color name="black">#000000</color><!--黑色-->
    <color name="blue_one">#9FC8E9</color><!--浅蓝色-->
    <color name="transparent">#00000000</color><!--透明-->
    <color name="transparent_bg">#22000000</color><!--半透明-->
</resources>

dimen.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--尺寸-->
    <dimen name="dp_0">0dp</dimen>
    <dimen name="dp_0_1">0.1dp</dimen>
    <dimen name="dp_0_5">0.5dp</dimen>
    <dimen name="dp_1">1dp</dimen>
    <dimen name="dp_1_5">1.5dp</dimen>
    <dimen name="dp_2">2dp</dimen>
    <dimen name="dp_2_5">2.5dp</dimen>
    <dimen name="dp_3">3dp</dimen>
    <dimen name="dp_3_5">3.5dp</dimen>
    <dimen name="dp_4">4dp</dimen>
    <dimen name="dp_4_5">4.5dp</dimen>
    <dimen name="dp_5">5dp</dimen>
    <dimen name="dp_6">6dp</dimen>
    <dimen name="dp_7">7dp</dimen>
    <dimen name="dp_8">8dp</dimen>
    <dimen name="dp_9">9dp</dimen>
    <dimen name="dp_10">10dp</dimen>
    <dimen name="dp_11">11dp</dimen>
    <dimen name="dp_12">12dp</dimen>
    <dimen name="dp_13">13dp</dimen>
    <dimen name="dp_14">14dp</dimen>
    <dimen name="dp_15">15dp</dimen>
    <dimen name="dp_16">16dp</dimen>
    <dimen name="dp_17">17dp</dimen>
    <dimen name="dp_18">18dp</dimen>
    <dimen name="dp_19">19dp</dimen>
    <dimen name="dp_20">20dp</dimen>
    <dimen name="dp_21">21dp</dimen>
    <dimen name="dp_22">22dp</dimen>
    <dimen name="dp_23">23dp</dimen>
    <dimen name="dp_24">24dp</dimen>
    <dimen name="dp_25">25dp</dimen>
    <dimen name="dp_26">26dp</dimen>
    <dimen name="dp_27">27dp</dimen>
    <dimen name="dp_28">28dp</dimen>
    <dimen name="dp_29">29dp</dimen>
    <dimen name="dp_30">30dp</dimen>
    <dimen name="dp_31">31dp</dimen>
    <dimen name="dp_32">32dp</dimen>
    <dimen name="dp_33">33dp</dimen>
    <dimen name="dp_34">34dp</dimen>
    <dimen name="dp_35">35dp</dimen>
    <dimen name="dp_36">36dp</dimen>
    <dimen name="dp_37">37dp</dimen>
    <dimen name="dp_38">38dp</dimen>
    <dimen name="dp_39">39dp</dimen>
    <dimen name="dp_40">40dp</dimen>
    <dimen name="dp_41">41dp</dimen>
    <dimen name="dp_42">42dp</dimen>
    <dimen name="dp_43">43dp</dimen>
    <dimen name="dp_44">44dp</dimen>
    <dimen name="dp_45">45dp</dimen>
    <dimen name="dp_46">46dp</dimen>
    <dimen name="dp_47">47dp</dimen>
    <dimen name="dp_48">48dp</dimen>
    <dimen name="dp_49">49dp</dimen>
    <dimen name="dp_50">50dp</dimen>
    <dimen name="dp_51">51dp</dimen>
    <dimen name="dp_52">52dp</dimen>
    <dimen name="dp_53">53dp</dimen>
    <dimen name="dp_54">54dp</dimen>
    <dimen name="dp_55">55dp</dimen>
    <dimen name="dp_56">56dp</dimen>
    <dimen name="dp_57">57dp</dimen>
    <dimen name="dp_58">58dp</dimen>
    <dimen name="dp_59">59dp</dimen>
    <dimen name="dp_60">60dp</dimen>
    <dimen name="dp_61">61dp</dimen>
    <dimen name="dp_62">62dp</dimen>
    <dimen name="dp_63">63dp</dimen>
    <dimen name="dp_64">64dp</dimen>
    <dimen name="dp_65">65dp</dimen>
    <dimen name="dp_66">66dp</dimen>
    <dimen name="dp_67">67dp</dimen>
    <dimen name="dp_68">68dp</dimen>
    <dimen name="dp_69">69dp</dimen>
    <dimen name="dp_70">70dp</dimen>
    <dimen name="dp_71">71dp</dimen>
    <dimen name="dp_72">72dp</dimen>
    <dimen name="dp_73">73dp</dimen>
    <dimen name="dp_74">74dp</dimen>
    <dimen name="dp_75">75dp</dimen>
    <dimen name="dp_76">76dp</dimen>
    <dimen name="dp_77">77dp</dimen>
    <dimen name="dp_78">78dp</dimen>
    <dimen name="dp_79">79dp</dimen>
    <dimen name="dp_80">80dp</dimen>
    <dimen name="dp_81">81dp</dimen>
    <dimen name="dp_82">82dp</dimen>
    <dimen name="dp_83">83dp</dimen>
    <dimen name="dp_84">84dp</dimen>
    <dimen name="dp_85">85dp</dimen>
    <dimen name="dp_86">86dp</dimen>
    <dimen name="dp_87">87dp</dimen>
    <dimen name="dp_88">88dp</dimen>
    <dimen name="dp_89">89dp</dimen>
    <dimen name="dp_90">90dp</dimen>
    <dimen name="dp_91">91dp</dimen>
    <dimen name="dp_92">92dp</dimen>
    <dimen name="dp_93">93dp</dimen>
    <dimen name="dp_94">94dp</dimen>
    <dimen name="dp_95">95dp</dimen>
    <dimen name="dp_96">96dp</dimen>
    <dimen name="dp_97">97dp</dimen>
    <dimen name="dp_98">98dp</dimen>
    <dimen name="dp_99">99dp</dimen>
    <dimen name="dp_100">100dp</dimen>
    <dimen name="dp_101">101dp</dimen>
    <dimen name="dp_102">102dp</dimen>
    <dimen name="dp_103">103dp</dimen>
    <dimen name="dp_104">104dp</dimen>
    <dimen name="dp_105">105dp</dimen>
    <dimen name="dp_106">106dp</dimen>
    <dimen name="dp_107">107dp</dimen>
    <dimen name="dp_108">108dp</dimen>
    <dimen name="dp_109">109dp</dimen>
    <dimen name="dp_110">110dp</dimen>
    <dimen name="dp_111">111dp</dimen>
    <dimen name="dp_112">112dp</dimen>
    <dimen name="dp_113">113dp</dimen>
    <dimen name="dp_114">114dp</dimen>
    <dimen name="dp_115">115dp</dimen>
    <dimen name="dp_116">116dp</dimen>
    <dimen name="dp_117">117dp</dimen>
    <dimen name="dp_118">118dp</dimen>
    <dimen name="dp_119">119dp</dimen>
    <dimen name="dp_120">120dp</dimen>
    <dimen name="dp_121">121dp</dimen>
    <dimen name="dp_122">122dp</dimen>
    <dimen name="dp_123">123dp</dimen>
    <dimen name="dp_124">124dp</dimen>
    <dimen name="dp_125">125dp</dimen>
    <dimen name="dp_126">126dp</dimen>
    <dimen name="dp_127">127dp</dimen>
    <dimen name="dp_128">128dp</dimen>
    <dimen name="dp_129">129dp</dimen>
    <dimen name="dp_130">130dp</dimen>
    <dimen name="dp_131">131dp</dimen>
    <dimen name="dp_132">132dp</dimen>
    <dimen name="dp_133">133dp</dimen>
    <dimen name="dp_134">134dp</dimen>
    <dimen name="dp_135">135dp</dimen>
    <dimen name="dp_136">136dp</dimen>
    <dimen name="dp_137">137dp</dimen>
    <dimen name="dp_138">138dp</dimen>
    <dimen name="dp_139">139dp</dimen>
    <dimen name="dp_140">140dp</dimen>
    <dimen name="dp_141">141dp</dimen>
    <dimen name="dp_142">142dp</dimen>
    <dimen name="dp_143">143dp</dimen>
    <dimen name="dp_144">144dp</dimen>
    <dimen name="dp_145">145dp</dimen>
    <dimen name="dp_146">146dp</dimen>
    <dimen name="dp_147">147dp</dimen>
    <dimen name="dp_148">148dp</dimen>
    <dimen name="dp_149">149dp</dimen>
    <dimen name="dp_150">150dp</dimen>
    <dimen name="dp_151">151dp</dimen>
    <dimen name="dp_152">152dp</dimen>
    <dimen name="dp_153">153dp</dimen>
    <dimen name="dp_154">154dp</dimen>
    <dimen name="dp_155">155dp</dimen>
    <dimen name="dp_156">156dp</dimen>
    <dimen name="dp_157">157dp</dimen>
    <dimen name="dp_158">158dp</dimen>
    <dimen name="dp_159">159dp</dimen>
    <dimen name="dp_160">160dp</dimen>
    <dimen name="dp_161">161dp</dimen>
    <dimen name="dp_162">162dp</dimen>
    <dimen name="dp_163">163dp</dimen>
    <dimen name="dp_164">164dp</dimen>
    <dimen name="dp_165">165dp</dimen>
    <dimen name="dp_166">166dp</dimen>
    <dimen name="dp_167">167dp</dimen>
    <dimen name="dp_168">168dp</dimen>
    <dimen name="dp_169">169dp</dimen>
    <dimen name="dp_170">170dp</dimen>
    <dimen name="dp_171">171dp</dimen>
    <dimen name="dp_172">172dp</dimen>
    <dimen name="dp_173">173dp</dimen>
    <dimen name="dp_174">174dp</dimen>
    <dimen name="dp_175">175dp</dimen>
    <dimen name="dp_176">176dp</dimen>
    <dimen name="dp_177">177dp</dimen>
    <dimen name="dp_178">178dp</dimen>
    <dimen name="dp_179">179dp</dimen>
    <dimen name="dp_180">180dp</dimen>
    <dimen name="dp_181">181dp</dimen>
    <dimen name="dp_182">182dp</dimen>
    <dimen name="dp_183">183dp</dimen>
    <dimen name="dp_184">184dp</dimen>
    <dimen name="dp_185">185dp</dimen>
    <dimen name="dp_186">186dp</dimen>
    <dimen name="dp_187">187dp</dimen>
    <dimen name="dp_188">188dp</dimen>
    <dimen name="dp_189">189dp</dimen>
    <dimen name="dp_190">190dp</dimen>
    <dimen name="dp_191">191dp</dimen>
    <dimen name="dp_192">192dp</dimen>
    <dimen name="dp_193">193dp</dimen>
    <dimen name="dp_194">194dp</dimen>
    <dimen name="dp_195">195dp</dimen>
    <dimen name="dp_196">196dp</dimen>
    <dimen name="dp_197">197dp</dimen>
    <dimen name="dp_198">198dp</dimen>
    <dimen name="dp_199">199dp</dimen>
    <dimen name="dp_200">200dp</dimen>
    <dimen name="dp_201">201dp</dimen>
    <dimen name="dp_202">202dp</dimen>
    <dimen name="dp_203">203dp</dimen>
    <dimen name="dp_204">204dp</dimen>
    <dimen name="dp_205">205dp</dimen>
    <dimen name="dp_206">206dp</dimen>
    <dimen name="dp_207">207dp</dimen>
    <dimen name="dp_208">208dp</dimen>
    <dimen name="dp_209">209dp</dimen>
    <dimen name="dp_210">210dp</dimen>
    <dimen name="dp_211">211dp</dimen>
    <dimen name="dp_212">212dp</dimen>
    <dimen name="dp_213">213dp</dimen>
    <dimen name="dp_214">214dp</dimen>
    <dimen name="dp_215">215dp</dimen>
    <dimen name="dp_216">216dp</dimen>
    <dimen name="dp_217">217dp</dimen>
    <dimen name="dp_218">218dp</dimen>
    <dimen name="dp_219">219dp</dimen>
    <dimen name="dp_220">220dp</dimen>
    <dimen name="dp_221">221dp</dimen>
    <dimen name="dp_222">222dp</dimen>
    <dimen name="dp_223">223dp</dimen>
    <dimen name="dp_224">224dp</dimen>
    <dimen name="dp_225">225dp</dimen>
    <dimen name="dp_226">226dp</dimen>
    <dimen name="dp_227">227dp</dimen>
    <dimen name="dp_228">228dp</dimen>
    <dimen name="dp_229">229dp</dimen>
    <dimen name="dp_230">230dp</dimen>
    <dimen name="dp_231">231dp</dimen>
    <dimen name="dp_232">232dp</dimen>
    <dimen name="dp_233">233dp</dimen>
    <dimen name="dp_234">234dp</dimen>
    <dimen name="dp_235">235dp</dimen>
    <dimen name="dp_236">236dp</dimen>
    <dimen name="dp_237">237dp</dimen>
    <dimen name="dp_238">238dp</dimen>
    <dimen name="dp_239">239dp</dimen>
    <dimen name="dp_240">240dp</dimen>
    <dimen name="dp_241">241dp</dimen>
    <dimen name="dp_242">242dp</dimen>
    <dimen name="dp_243">243dp</dimen>
    <dimen name="dp_244">244dp</dimen>
    <dimen name="dp_245">245dp</dimen>
    <dimen name="dp_246">246dp</dimen>
    <dimen name="dp_247">247dp</dimen>
    <dimen name="dp_248">248dp</dimen>
    <dimen name="dp_249">249dp</dimen>
    <dimen name="dp_250">250dp</dimen>
    <dimen name="dp_251">251dp</dimen>
    <dimen name="dp_252">252dp</dimen>
    <dimen name="dp_253">253dp</dimen>
    <dimen name="dp_254">254dp</dimen>
    <dimen name="dp_255">255dp</dimen>
    <dimen name="dp_256">256dp</dimen>
    <dimen name="dp_257">257dp</dimen>
    <dimen name="dp_258">258dp</dimen>
    <dimen name="dp_259">259dp</dimen>
    <dimen name="dp_260">260dp</dimen>
    <dimen name="dp_261">261dp</dimen>
    <dimen name="dp_262">262dp</dimen>
    <dimen name="dp_263">263dp</dimen>
    <dimen name="dp_264">264dp</dimen>
    <dimen name="dp_265">265dp</dimen>
    <dimen name="dp_266">266dp</dimen>
    <dimen name="dp_267">267dp</dimen>
    <dimen name="dp_268">268dp</dimen>
    <dimen name="dp_269">269dp</dimen>
    <dimen name="dp_270">270dp</dimen>
    <dimen name="dp_271">271dp</dimen>
    <dimen name="dp_272">272dp</dimen>
    <dimen name="dp_273">273dp</dimen>
    <dimen name="dp_274">274dp</dimen>
    <dimen name="dp_275">275dp</dimen>
    <dimen name="dp_276">276dp</dimen>
    <dimen name="dp_277">277dp</dimen>
    <dimen name="dp_278">278dp</dimen>
    <dimen name="dp_279">279dp</dimen>
    <dimen name="dp_280">280dp</dimen>
    <dimen name="dp_281">281dp</dimen>
    <dimen name="dp_282">282dp</dimen>
    <dimen name="dp_283">283dp</dimen>
    <dimen name="dp_284">284dp</dimen>
    <dimen name="dp_285">285dp</dimen>
    <dimen name="dp_286">286dp</dimen>
    <dimen name="dp_287">287dp</dimen>
    <dimen name="dp_288">288dp</dimen>
    <dimen name="dp_289">289dp</dimen>
    <dimen name="dp_290">290dp</dimen>
    <dimen name="dp_291">291dp</dimen>
    <dimen name="dp_292">292dp</dimen>
    <dimen name="dp_293">293dp</dimen>
    <dimen name="dp_294">294dp</dimen>
    <dimen name="dp_295">295dp</dimen>
    <dimen name="dp_296">296dp</dimen>
    <dimen name="dp_297">297dp</dimen>
    <dimen name="dp_298">298dp</dimen>
    <dimen name="dp_299">299dp</dimen>
    <dimen name="dp_300">300dp</dimen>
    <dimen name="dp_301">301dp</dimen>
    <dimen name="dp_302">302dp</dimen>
    <dimen name="dp_303">303dp</dimen>
    <dimen name="dp_304">304dp</dimen>
    <dimen name="dp_305">305dp</dimen>
    <dimen name="dp_306">306dp</dimen>
    <dimen name="dp_307">307dp</dimen>
    <dimen name="dp_308">308dp</dimen>
    <dimen name="dp_309">309dp</dimen>
    <dimen name="dp_310">310dp</dimen>
    <dimen name="dp_311">311dp</dimen>
    <dimen name="dp_312">312dp</dimen>
    <dimen name="dp_313">313dp</dimen>
    <dimen name="dp_314">314dp</dimen>
    <dimen name="dp_315">315dp</dimen>
    <dimen name="dp_316">316dp</dimen>
    <dimen name="dp_317">317dp</dimen>
    <dimen name="dp_318">318dp</dimen>
    <dimen name="dp_319">319dp</dimen>
    <dimen name="dp_320">320dp</dimen>
    <dimen name="dp_321">321dp</dimen>
    <dimen name="dp_322">322dp</dimen>
    <dimen name="dp_323">323dp</dimen>
    <dimen name="dp_324">324dp</dimen>
    <dimen name="dp_325">325dp</dimen>
    <dimen name="dp_326">326dp</dimen>
    <dimen name="dp_327">327dp</dimen>
    <dimen name="dp_328">328dp</dimen>
    <dimen name="dp_329">329dp</dimen>
    <dimen name="dp_330">330dp</dimen>
    <dimen name="dp_331">331dp</dimen>
    <dimen name="dp_332">332dp</dimen>
    <dimen name="dp_333">333dp</dimen>
    <dimen name="dp_334">334dp</dimen>
    <dimen name="dp_335">335dp</dimen>
    <dimen name="dp_336">336dp</dimen>
    <dimen name="dp_337">337dp</dimen>
    <dimen name="dp_338">338dp</dimen>
    <dimen name="dp_339">339dp</dimen>
    <dimen name="dp_340">340dp</dimen>
    <dimen name="dp_341">341dp</dimen>
    <dimen name="dp_342">342dp</dimen>
    <dimen name="dp_343">343dp</dimen>
    <dimen name="dp_344">344dp</dimen>
    <dimen name="dp_345">345dp</dimen>
    <dimen name="dp_346">346dp</dimen>
    <dimen name="dp_347">347dp</dimen>
    <dimen name="dp_348">348dp</dimen>
    <dimen name="dp_349">349dp</dimen>
    <dimen name="dp_350">350dp</dimen>
    <dimen name="dp_351">351dp</dimen>
    <dimen name="dp_352">352dp</dimen>
    <dimen name="dp_353">353dp</dimen>
    <dimen name="dp_354">354dp</dimen>
    <dimen name="dp_355">355dp</dimen>
    <dimen name="dp_356">356dp</dimen>
    <dimen name="dp_357">357dp</dimen>
    <dimen name="dp_358">358dp</dimen>
    <dimen name="dp_359">359dp</dimen>
    <dimen name="dp_360">360dp</dimen>
    <dimen name="dp_365">365dp</dimen>
    <dimen name="dp_370">370dp</dimen>
    <dimen name="dp_400">400dp</dimen>
    <dimen name="dp_410">410dp</dimen>
    <dimen name="dp_422">422dp</dimen>
    <dimen name="dp_472">472dp</dimen>
    <dimen name="dp_500">500dp</dimen>
    <dimen name="dp_600">600dp</dimen>
    <dimen name="dp_640">640dp</dimen>
    <dimen name="dp_720">720dp</dimen>

    <!--字体-->
    <dimen name="sp_6">6sp</dimen>
    <dimen name="sp_7">7sp</dimen>
    <dimen name="sp_8">8sp</dimen>
    <dimen name="sp_9">9sp</dimen>
    <dimen name="sp_10">10sp</dimen>
    <dimen name="sp_11">11sp</dimen>
    <dimen name="sp_12">12sp</dimen>
    <dimen name="sp_13">13sp</dimen>
    <dimen name="sp_14">14sp</dimen>
    <dimen name="sp_15">15sp</dimen>
    <dimen name="sp_16">16sp</dimen>
    <dimen name="sp_17">17sp</dimen>
    <dimen name="sp_18">18sp</dimen>
    <dimen name="sp_19">19sp</dimen>
    <dimen name="sp_20">20sp</dimen>
    <dimen name="sp_21">21sp</dimen>
    <dimen name="sp_22">22sp</dimen>
    <dimen name="sp_23">23sp</dimen>
    <dimen name="sp_24">24sp</dimen>
    <dimen name="sp_25">25sp</dimen>
    <dimen name="sp_26">26sp</dimen>
    <dimen name="sp_27">27sp</dimen>
    <dimen name="sp_28">28sp</dimen>
    <dimen name="sp_29">29sp</dimen>
    <dimen name="sp_30">30sp</dimen>
    <dimen name="sp_31">31sp</dimen>
    <dimen name="sp_32">32sp</dimen>
    <dimen name="sp_33">33sp</dimen>
    <dimen name="sp_34">34sp</dimen>
    <dimen name="sp_35">35sp</dimen>
    <dimen name="sp_36">36sp</dimen>
    <dimen name="sp_37">37sp</dimen>
    <dimen name="sp_38">38sp</dimen>
    <dimen name="sp_40">40sp</dimen>
    <dimen name="sp_42">42sp</dimen>
    <dimen name="sp_48">48sp</dimen>
</resources>

弹窗页面的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/transparent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/dp_8"
        android:background="@mipmap/icon_add_bg_9"
        android:orientation="vertical"
        android:paddingBottom="@dimen/dp_20"
        android:paddingTop="@dimen/dp_20">

        <TextView
            android:id="@+id/tv_change_city"
            android:gravity="center"
            android:layout_width="@dimen/dp_140"
            android:layout_height="@dimen/dp_48"
            android:text="切换城市"
            android:foreground="@drawable/bg_white"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"/>

        <TextView
            android:id="@+id/tv_change_bg"
            android:gravity="center"
            android:layout_width="@dimen/dp_140"
            android:layout_height="@dimen/dp_48"
            android:text="切换背景"
            android:foreground="@drawable/bg_white"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"/>

        <TextView
            android:id="@+id/tv_more"
            android:gravity="center"
            android:layout_width="@dimen/dp_140"
            android:layout_height="@dimen/dp_48"
            android:text="更多功能"
            android:foreground="@drawable/bg_white"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_16"/>
    </LinearLayout>

</LinearLayout>

然后是对activity_main.xml文件的修改 在这里插入图片描述 这里修改了原来的id和src里面的图片,增加了点击的效果 icon_add.png 在这里插入图片描述 selector_bg_img.xml,点击之后背景变色,增加用户体验

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#22000000"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#00000000"/>
        </shape>
    </item>
</selector>

MainActivity.java 在这里插入图片描述 这里我是把原来的id注释掉,不过我没有删掉,因为我要让你们知道是怎么样一个过程,你们是可以直接替换的,不替换会报错了,当然你不改Id就不会报错,但是id的命名和现在是意思对不上,会对其他人造成困扰,严谨一点就修改ID。 在这里插入图片描述 更改点击之后的弹窗。 在这里插入图片描述 要显示弹窗一些基本的配置必不可少,这里用到了一个动画工具类AnimationUtil,代码如下:

package com.llw.mvplibrary.utils;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;

/**
 * 动画工具类
 * UpdateListener: 动画过程中通过添加此监听来回调数据
 * EndListener: 动画结束的时候通过此监听器来做一些处理
 */
public class AnimationUtil {
    private ValueAnimator valueAnimator;
    private UpdateListener updateListener;
    private EndListener endListener;
    private long duration;
    private float start;
    private float end;
    private Interpolator interpolator = new LinearInterpolator();

    public AnimationUtil() {
        duration = 1000; //默认动画时常1s
        start = 0.0f;
        end = 1.0f;
        interpolator = new LinearInterpolator();// 匀速的插值器
    }


    public void setDuration(int timeLength) {
        duration = timeLength;
    }

    public void setValueAnimator(float start, float end, long duration) {

        this.start = start;
        this.end = end;
        this.duration = duration;

    }

    public void setInterpolator(Interpolator interpolator) {
        this.interpolator = interpolator;
    }

    public void startAnimator() {
        if (valueAnimator != null){
            valueAnimator = null;
        }
        valueAnimator = ValueAnimator.ofFloat(start, end);
        valueAnimator.setDuration(duration);
        valueAnimator.setInterpolator(interpolator);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {

                if (updateListener == null) {
                    return;
                }

                float cur = (float) valueAnimator.getAnimatedValue();
                updateListener.progress(cur);
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {}
            @Override
            public void onAnimationEnd(Animator animator) {
                if(endListener == null){
                    return;
                }
                endListener.endUpdate(animator);
            }
            @Override
            public void onAnimationCancel(Animator animator) {}

            @Override
            public void onAnimationRepeat(Animator animator) {}
        });
        valueAnimator.start();
    }

    public void addUpdateListener(UpdateListener updateListener) {

        this.updateListener = updateListener;
    }

    public void addEndListner(EndListener endListener){
        this.endListener = endListener;
    }

    public interface EndListener {
        void endUpdate(Animator animator);
    }

    public interface UpdateListener {

        void progress(float progress);
    }
}

在这里插入图片描述 然后写三个方法,一个显示弹窗,及控制里面的点击事件、计算动画时间、第三个修改背景的透明度类似蒙版的效果。 在这里插入图片描述 这三个方法的代码我都会贴上来。不过首先,先增加弹窗出现和关闭的动画效果。 在这里插入图片描述 这张图告诉你在什么地方添加这个样式

 	<!--右上角加号点击弹窗动画效果-->
    <style name="pop_add">
        <item name="android:windowEnterAnimation">@anim/pop_add_show</item>
        <item name="android:windowExitAnimation">@anim/pop_add_hide</item>
    </style>

pop_add_show.xml 显示动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
    <scale
        android:duration="500"
        android:fromXScale="0"
        android:fromYScale="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="85%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>
</set>

pop_add_hide.xml 隐藏动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="85%"
        android:pivotY="0%"
        android:toXScale="0"
        android:toYScale="0"/>
</set>

然后贴一下三个方法的代码:

showAddWindow方法

	/**
     * 更多功能弹窗,因为区别于我原先写的弹窗
     */
    private void showAddWindow() {
        // 设置布局文件
        mPopupWindow.setContentView(LayoutInflater.from(this).inflate(R.layout.window_add, null));// 为了避免部分机型不显示,我们需要重新设置一下宽高
        mPopupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
        mPopupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        mPopupWindow.setBackgroundDrawable(new ColorDrawable(0x0000));// 设置pop透明效果
        mPopupWindow.setAnimationStyle(R.style.pop_add);// 设置pop出入动画
        mPopupWindow.setFocusable(true);// 设置pop获取焦点,如果为false点击返回按钮会退出当前Activity,如果pop中有Editor的话,focusable必须要为true
        mPopupWindow.setTouchable(true);// 设置pop可点击,为false点击事件无效,默认为true
        mPopupWindow.setOutsideTouchable(true);// 设置点击pop外侧消失,默认为false;在focusable为true时点击外侧始终消失
        mPopupWindow.showAsDropDown(ivAdd, -100, 0);// 相对于 + 号正下面,同时可以设置偏移量
        // 设置pop关闭监听,用于改变背景透明度
        mPopupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {//关闭弹窗
            @Override
            public void onDismiss() {
                toggleBright();
            }
        });
        //绑定布局中的控件
        TextView changeCity = mPopupWindow.getContentView().findViewById(R.id.tv_change_city);
        TextView changeBg = mPopupWindow.getContentView().findViewById(R.id.tv_change_bg);
        TextView more = mPopupWindow.getContentView().findViewById(R.id.tv_more);
        changeCity.setOnClickListener(view -> {//切换城市
            showCityWindow();
            mPopupWindow.dismiss();
        });
        changeBg.setOnClickListener(view -> {//切换背景
            ToastUtils.showShortToast(context,"你点击了切换背景");
            mPopupWindow.dismiss();
        });
        more.setOnClickListener(view -> {//更多功能
            ToastUtils.showShortToast(context,"如果你有什么好的建议,可以博客留言哦!");
            mPopupWindow.dismiss();
        });
    }

计算动画时间

	/**
     * 计算动画时间
     */
    private void toggleBright() {
        // 三个参数分别为:起始值 结束值 时长,那么整个动画回调过来的值就是从0.5f--1f的
        animUtil.setValueAnimator(START_ALPHA, END_ALPHA, DURATION);
        animUtil.addUpdateListener(new AnimationUtil.UpdateListener() {
            @Override
            public void progress(float progress) {
                // 此处系统会根据上述三个值,计算每次回调的值是多少,我们根据这个值来改变透明度
                bgAlpha = bright ? progress : (START_ALPHA + END_ALPHA - progress);
                backgroundAlpha(bgAlpha);
            }
        });
        animUtil.addEndListner(new AnimationUtil.EndListener() {
            @Override
            public void endUpdate(Animator animator) {
                // 在一次动画结束的时候,翻转状态
                bright = !bright;
            }
        });
        animUtil.startAnimator();
    }

此方法用于改变背景的透明度

	/**
     * 此方法用于改变背景的透明度,从而达到“变暗”的效果
     */
    private void backgroundAlpha(float bgAlpha) {
        WindowManager.LayoutParams lp = getWindow().getAttributes();
        // 0.0-1.0
        lp.alpha = bgAlpha;
        getWindow().setAttributes(lp);
        // everything behind this window will be dimmed.
        // 此方法用来设置浮动层,防止部分手机变暗无效
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    }

这几个方法借鉴了网络上的代码。

效果图如下: 在这里插入图片描述 如果你在写的过程中遇到任何问题,可以直接评论或者给我发邮件。 接下来就是切换背景了